Afficher des données dans une fenêtre modale

**Raptor92** · 21/02/2024, 15h03

Bonjour à Tous,

Dans le code ci-dessous, je cherche à afficher dans la fenêtre modale les coloris et prix d'un article.
Ma structure est constitué de 2 tables

1- Articles
2- Coloris et tarifs

J'ai donc une requête qui me renvoi bien l'ensemble des données mais je ne sais pas comment afficher dans la modale que les champs "TAR_COLx, TAR_HTx et TAR_TTCx" alors que je n'ai pas à les afficher dans le tableau
Malgré mes recherches, je ne vois pas comment faire
Sauriez vous me guider vers la solution svp

Un grand merci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
             <section>
                <h4>Enregistrements</h4>
                <table>
                    <thead>
                        <tr>
                            <th width=100%>Code</th>
                            <th width=100%>Désignation........</th>
                            <th width=100%>Unité..........</th>
                            <th width=100%>Conditionnement</th>
                            <th width=100%>Code fournisseur</th>
                            <th width=100%>Nom founisseur</th>
                            <th width=100%>Commentaire</th>
                            <th width=100%>Date création</th>
                            <th width=100%>Date modification</th>
                            <th width=17%>......</th>
 
                        </tr>
                    </thead>
                    <tbody>
                        <!-- CONSTRUCTION TABLEAU DES USERS -->
                        <?php
                        require('../simag/requete/userlistReq.php');
                        $query = $bdd->prepare('SELECT ART_CODE,ART_DESIGN,ART_UNITMESURE,ART_BOX,ART_FOURCODE,
                        ART_FOURNAME,ART_FOURREF,ART_CREATE,ART_COMMENT,ART_MODIF, TAR_COL1,TAR_HT1,TAR_TTC1,TAR_COL2,TAR_HT2,
                        TAR_TTC2 FROM ARTICLES,TARIF WHERE TAR_ART_CODE=ART_CODE');
                        $query->execute();
                        while ($data = $query->fetch()) {
                        ?>
                            <tr onclick="fctClick(this)">
                                <td><?php echo $data['ART_CODE']; ?></td>
                                <td><?php echo $data['ART_DESIGN']; ?></td>
                                <td><?php echo $data['ART_UNITMESURE']; ?></td>
                                <td><?php echo $data['ART_BOX']; ?></td>
                                <td><?php echo $data['ART_FOURCODE']; ?></td>
                                <td><?php echo $data['ART_FOURNAME']; ?></td>
                                <td><?php echo $data['ART_COMMENT']; ?></td>
                                <td><?php echo $data['ART_CREATE']; ?></td>
                                <td><?php echo $data['ART_MODIF']; ?></td>
                                <td><button class="btnR" onClick="bascule('boite');">+</button></td>
                            </tr>
 
                        <?php
                        }
                        ?>
                    </tbody>
                </table>
                <form method="POST" action="" class="forma">
                    <div name="boite" id="boite" style="visibility: hidden">
                        <h5>Formulaire</h5>
                        <dialog id="mydialog" open>
                            <table>
                                <fieldset class="fieldseta">
                                    <p><label>COL 1</label><input type="text" name="col1"></p>
                                    <p><label>HT 1</label><input type="text" name="ht1"></p>
                                    <p><label>TTC 1</label><input type="text" name="ttc1"></p>
                                    <p><label>COL 2</label><input type="text" name="col2"></p>
                                    <p><label>HT 2</label><input type="text" name="ht2"></p>
                                    <p><label>TTC 2</label><input type="text" name="ttc2"></p>
                                    <p><label>Date modif</label><input type="text" name="modif"></p>
                                    <p>
                                        <input type="submit" name="update" value="Modifier">
                                        <input type="reset" value="Annuler">
                                        <button class="btn"><a href="index.php" class="btna">Accueil</a></button>
                                    </p>
                                </fieldset>
                            </table>
                            <div class="boutons"><button onclick="$dialog.close()">Fermer</button></div>
                        </dialog>
                        </script>
                        <script src="../js/userDialog.js"></script>
                        </dialog>
                </form>
            </section>

Le code JS

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var $dialog = document.getElementById('mydialog');
if (!('show' in $dialog)) {
    document.getElementById('promptCompat').className = 'no_dialog';
}
$dialog.addEventListener('close', function() {
    console.log('Fermeture. ', this.returnValue);
});

**mathieu** · 21/02/2024, 16h44

quand vous postez dans le forum html, il vaut mieux nous montrer le code html généré pour qu'on puisse tester de notre côté.

**Raptor92** · 21/02/2024, 17h05

Bonjour,

Il y est

**mathieu** · 21/02/2024, 17h10

il y a du code php dans votre code, il s'agit du code source qu'on ne peux pas tester.

**Raptor92** · 21/02/2024, 17h21

Je ne comprends pas exactement, mais voici le code la page entière (j'ai juste enlevé quelques lignes confidentielles du menu)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/user.css" />
    <script src="../js/clicDroit.js"></script>
 
    <title>LISTE DES ARTICLES</title>
 
</head>
 
<body>
<nav class="side-nav">
    <div class="wrapper">
      <div class="three-dots-container">
        <div class="dot d1"></div>
        <div class="dot d2"></div>
        <div class="dot d3"></div>
      </div>
      <div class="nav-bloc n-1">
        <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="file" class="svg-inline--fa fa-file fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
          <path d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z"></path>
        </svg>
        <div class="sub-nav">
          <h2>Les articles</h2>
          <ul>
            <li>
              <a href="article.php"><i class="fa-solid fa-plus"></i>&nbsp;&nbsp;Création</a>
            </li>
            <li>
              <a href=""><i class="fa-solid fa-list-ul"></i>&nbsp;&nbsp;Liste & Modification</a>
            </li>
            <li>
              <a href=""><i class="fa-solid fa-warehouse"></i>&nbsp;&nbsp;Stock par articles</a>
            </li>
            <li>
              <a href=""><i class="fa-solid fa-gear"></i>&nbsp;&nbsp;Monitoring</a>
            </li>
          </ul>
        </div>
      </div>
 
  </nav>
    <main class="main-content">
        <!--  CTRL du droit d'accès  -->
        <?php $page = "Liste Articles";
        $action = "Consultation";  ?>
        <?php require('../simag/inc/droitacces.inc.php'); ?>
        <!--  ----------------------  -->
        <!-- DEBUT DE PAGE -->
        <div id="main">
            <header>
                <a class="retour" href="extranet.php"><img width="180" height="80" border="0" alt="Retour Accueil" /></a>
                <h1>ARTICLE LIST</h1>
            </header>
            <section>
                <h4>Enregistrements</h4>
                <table>
                    <thead>
                        <tr>
                            <th width=100%>Code</th>
                            <th width=100%>Désignation........</th>
                            <th width=100%>Unité..........</th>
                            <th width=100%>Conditionnement</th>
                            <th width=100%>Code fournisseur</th>
                            <th width=100%>Nom founisseur..........</th>
                            <th width=100%>Commentaire..........................</th>
                            <th width=100%>Date création............</th>
                            <th width=100%>Date modification........</th>
                            <th width=17%>......</th>
 
                        </tr>
                    </thead>
                    <tbody>
                        <!-- CONSTRUCTION TABLEAU DES USERS -->
                        <?php
                        require('../simag/requete/userlistReq.php');
                        $query = $bdd->prepare('SELECT ART_CODE,ART_DESIGN,ART_UNITMESURE,ART_BOX,ART_FOURCODE,
                        ART_FOURNAME,ART_FOURREF,ART_CREATE,ART_COMMENT,ART_MODIF, TAR_COL1,TAR_HT1,TAR_TTC1,TAR_COL2,TAR_HT2,
                        TAR_TTC2,TAR_COL3,TAR_HT3,TAR_TTC3,TAR_COL4,TAR_HT4,TAR_TTC4,TAR_COL5,TAR_HT5,TAR_TTC5,TAR_COL6,TAR_HT6,TAR_TTC6
                        FROM ARTICLES,TARIF WHERE TAR_ART_CODE=ART_CODE');
                        $query->execute();
                        while ($data = $query->fetch()) {
                        ?>
                            <tr onclick="fctClick(this)">
                                <td><?php echo $data['ART_CODE']; ?></td>
                                <td><?php echo $data['ART_DESIGN']; ?></td>
                                <td><?php echo $data['ART_UNITMESURE']; ?></td>
                                <td><?php echo $data['ART_BOX']; ?></td>
                                <td><?php echo $data['ART_FOURCODE']; ?></td>
                                <td><?php echo $data['ART_FOURNAME']; ?></td>
                                <td><?php echo $data['ART_COMMENT']; ?></td>
                                <td><?php echo $data['ART_CREATE']; ?></td>
                                <td><?php echo $data['ART_MODIF']; ?></td>
                                <td style="display:none"><?php echo $data['TAR_COL1']; ?></td>
                                <td style="display:none"><?php echo $data['TAR_HT1']; ?></td>
                                <td style="display:none"><?php echo $data['TAR_TTC1']; ?></td>
                                <td style="display:none"><?php echo $data['TAR_COL2']; ?></td>
                                <td style="display:none"><?php echo $data['TAR_HT2']; ?></td>
                                <td style="display:none"><?php echo $data['TAR_TTC2']; ?></td>
                                <td style="display:none"><?php echo $data['TAR_COL3']; ?></td>
                                <td style="display:none"><?php echo $data['TAR_HT3']; ?></td>
                                <td style="display:none"><?php echo $data['TAR_TTC3']; ?></td>
                                <td style="display:none"><?php echo $data['TAR_COL4']; ?></td>
                                <td style="display:none"><?php echo $data['TAR_HT4']; ?></td>
                                <td style="display:none"><?php echo $data['TAR_TTC4']; ?></td>
                                <td style="display:none"><?php echo $data['TAR_COL5']; ?></td>
                                <td style="display:none"><?php echo $data['TAR_HT5']; ?></td>
                                <td style="display:none"><?php echo $data['TAR_TTC5']; ?></td>
                                <td style="display:none"><?php echo $data['TAR_COL6']; ?></td>
                                <td style="display:none"><?php echo $data['TAR_HT6']; ?></td>
                                <td style="display:none"><?php echo $data['TAR_TTC6']; ?></td>
                                <td><button class="btnR" onClick="bascule('boite');">+</button></td>
                            </tr>
 
                        <?php
                        }
                        ?>
                    </tbody>
                </table>
                <form method="POST" action="" class="forma">
                    <div name="boite" id="boite" style="visibility: hidden">
                        <h5>Formulaire</h5>
                        <dialog id="mydialog" open>
                            <table>
                                <fieldset class="fieldseta">
                                    <p style="display:none"><label>COL 1</label><input type="text" name="col1"></p>
                                    <p style="display:none"><label>HT 1</label><input type="text" name="ht1"></p>
                                    <p style="display:none"><label>TTC 1</label><input type="text" name="ttc1"></p>
                                    <p style="display:none"><label>COL 2</label><input type="text" name="col2"></p>
                                    <p style="display:none"><label>HT 2</label><input type="text" name="ht2"></p>
                                    <p style="display:none"><label>TTC 2</label><input type="text" name="ttc2"></p>
                                    <p style="display:none"><label>Date modif</label><input type="text" name="modif"></p>
                                    <p style="display:none"><label>TTC 2</label><input type="text" name="ttc2"></p>
                                    <p style="display:none"><label>Date modif</label><input type="text" name="modif"></p>
                                    <p><label class="lmodal">Coloris 1</label><input class="lmodal" type="text" name="col1"></p>
                                    <p><label class="lmodal">Prix HT 1</label><input class="lmodal" type="text" name="ht1"></p>
                                    <p><label class="lmodal">Prix TTC 1</label><input class="lmodal" type="text" name="ttc1"></p><!-- 2  -->
                                    <p><label>Coloris 2</label><input type="text" name="col2"></p>
                                    <p><label>Prix HT 2</label><input type="text" name="ht2"></p>
                                    <p><label>Prix TTC 2</label><input type="text" name="ttc2"></p><!-- 3  -->
                                    <p><label class="lmodal">Coloris 3</label><input class="lmodal" type="text" name="col3"></p>
                                    <p><label class="lmodal">Prix HT 3</label><input class="lmodal" type="text" name="ht3"></p>
                                    <p><label class="lmodal">Prix TTC 3</label><input class="lmodal" type="text" name="ttc3"></p><!-- 4  -->
                                    <p><label>Coloris 4</label><input type="text" name="col4"></p>
                                    <p><label>Prix HT 4</label><input type="text" name="ht4"></p>
                                    <p><label>Prix TTC 4</label><input type="text" name="ttc4"></p><!-- 5  -->
                                    <p><label class="lmodal">Coloris 5</label><input class="lmodal" type="text" name="col5"></p>
                                    <p><label class="lmodal">Prix HT 5</label><input class="lmodal" type="text" name="ht5"></p>
                                    <p><label class="lmodal">Prix TTC 5</label><input class="lmodal" type="text" name="ttc5"></p><!-- 6  -->
                                    <p><label>Coloris 6</label><input type="text" name="col6"></p>
                                    <p><label>Prix HT 6</label><input type="text" name="ht6"></p>
                                    <p><label>Prix TTC 6</label><input type="text" name="ttc6"></p>
 
                                        <input type="submit" name="update" value="Modifier">
                                        <input type="reset" value="Annuler">
                                        <input type="submit" value="Fermer" onclick="$dialog.close()">
                                    </p>
                                </fieldset>
                            </table>
                        </dialog>
                        </script>
                        <script src="../js/userDialog.js"></script>
                        </dialog>
                </form>
            </section>
        </div>
        <script src="../js/userlist.js"></script>
 
        <?php
        if (isset($_POST['update'])) { // si formulaire soumis
            echo $_POST['col1'];
            echo $_POST['ht1'];
            echo $_POST['ttc1'];
            echo $_POST['col2'];
            echo $_POST['ht2'];
            echo $_POST['ttc2'];
            ......
            echo $_POST['modif'];
        }
        $page = "Liste des articles";
        $action = "Modification";
        require('../simag/inc/droitacces.inc.php');
        ?>
</body>
 
</html>

**mathieu** · 21/02/2024, 17h37

le code php est ce qui se trouve sur le serveur et va générer le code html qui est envoyé au navigateur.
pour pouvoir tester votre code, nous avons besoin du résultat qui se trouve dans le navigateur, nous n'avons pas toute votre base de données pour tester le code php et surtout ce n'est pas la question ici puisque c'est le forum qui concerne le code html.

**Raptor92** · 21/02/2024, 17h46

Ceci est le code venant du navigateur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/user.css" />
    <!--<script src="../js/clicDroit.js"></script>-->
 
    <title>LISTE DES ARTICLES</title>
 
</head>
 
<body>
<nav class="side-nav">
    <div class="wrapper">
      <div class="three-dots-container">
        <div class="dot d1"></div>
        <div class="dot d2"></div>
        <div class="dot d3"></div>
      </div>
      <div class="nav-bloc n-1">
        <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="file" class="svg-inline--fa fa-file fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
          <path d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z"></path>
        </svg>
        <div class="sub-nav">
          <h2>Les articles</h2>
          <ul>
            <li>
              <a href="article.php"><i class="fa-solid fa-plus"></i>&nbsp;&nbsp;Création</a>
            </li>
            <li>
              <a href=""><i class="fa-solid fa-list-ul"></i>&nbsp;&nbsp;Liste & Modification</a>
            </li>
            <li>
              <a href=""><i class="fa-solid fa-warehouse"></i>&nbsp;&nbsp;Stock par articles</a>
            </li>
            <li>
              <a href=""><i class="fa-solid fa-gear"></i>&nbsp;&nbsp;Monitoring</a>
            </li>
          </ul>
        </div>
      </div>             -->
    </div>
  </nav>
    <main class="main-content">
        <!--  CTRL du droit d'accès  -->
 
        <!--  ----------------------  -->
        <!-- DEBUT DE PAGE -->
        <div id="main">
            <header>
                <a class="retour" href="extranet.php"><img width="180" height="80" border="0" alt="Retour Accueil" /></a>
                <h1>ARTICLE LIST</h1>
            </header>
            <section>
                <h4>Enregistrements</h4>
                <table>
                    <thead>
                        <tr>
                            <th width=100%>Code</th>
                            <th width=100%>Désignation........</th>
                            <th width=100%>Unité..........</th>
                            <th width=100%>Conditionnement</th>
                            <th width=100%>Code fournisseur</th>
                            <th width=100%>Nom founisseur..........</th>
                            <th width=100%>Commentaire..........................</th>
                            <th width=100%>Date création............</th>
                            <th width=100%>Date modification........</th>
                            <th width=17%>......</th>
 
                        </tr>
                    </thead>
                    <tbody>
                        <!-- CONSTRUCTION TABLEAU DES USERS -->
                                                    <tr onclick="fctClick(this)">
                                <td>AMA-1000</td>
                                <td>VESTE AGNEAU</td>
                                <td>34-56</td>
                                <td>unit</td>
                                <td>A001</td>
                                <td>AMAZON</td>
                                <td>1er INSERT DE CTRL</td>
                                <td>2024-02-21</td>
                                <td>2024-02-21</td>
                                <td style="display:none">001</td>
                                <td style="display:none">120</td>
                                <td style="display:none">126</td>
                                <td style="display:none">165C </td>
                                <td style="display:none">120</td>
                                <td style="display:none">126</td>
                                <td style="display:none">1788C</td>
                                <td style="display:none">110</td>
                                <td style="display:none">115</td>
                                <td style="display:none">426C</td>
                                <td style="display:none">110</td>
                                <td style="display:none">115</td>
                                <td style="display:none">430C</td>
                                <td style="display:none">110</td>
                                <td style="display:none">115</td>
                                <td style="display:none">431C</td>
                                <td style="display:none">110</td>
                                <td style="display:none">115</td>
                                <td><button class="btnR" onClick="bascule('boite');">+</button></td>
                            </tr>
 
                                            </tbody>
                </table>
                <form method="POST" action="" class="forma">
                    <div name="boite" id="boite" style="visibility: hidden">
                        <h5>Formulaire</h5>
                        <dialog id="mydialog" open>
                            <table>
                                <fieldset class="fieldseta">
                                    <p style="display:none"><label>COL 1</label><input type="text" name="col1"></p>
                                    <p style="display:none"><label>HT 1</label><input type="text" name="ht1"></p>
                                    <p style="display:none"><label>TTC 1</label><input type="text" name="ttc1"></p>
                                    <p style="display:none"><label>COL 2</label><input type="text" name="col2"></p>
                                    <p style="display:none"><label>HT 2</label><input type="text" name="ht2"></p>
                                    <p style="display:none"><label>TTC 2</label><input type="text" name="ttc2"></p>
                                    <p style="display:none"><label>Date modif</label><input type="text" name="modif"></p>
                                    <p style="display:none"><label>TTC 2</label><input type="text" name="ttc2"></p>
                                    <p style="display:none"><label>Date modif</label><input type="text" name="modif"></p>
                                    <p><label class="lmodal">Coloris 1</label><input class="lmodal" type="text" name="col1"></p>
                                    <p><label class="lmodal">Prix HT 1</label><input class="lmodal" type="text" name="ht1"></p>
                                    <p><label class="lmodal">Prix TTC 1</label><input class="lmodal" type="text" name="ttc1"></p><!-- 2  -->
                                    <p><label>Coloris 2</label><input type="text" name="col2"></p>
                                    <p><label>Prix HT 2</label><input type="text" name="ht2"></p>
                                    <p><label>Prix TTC 2</label><input type="text" name="ttc2"></p><!-- 3  -->
                                    <p><label class="lmodal">Coloris 3</label><input class="lmodal" type="text" name="col3"></p>
                                    <p><label class="lmodal">Prix HT 3</label><input class="lmodal" type="text" name="ht3"></p>
                                    <p><label class="lmodal">Prix TTC 3</label><input class="lmodal" type="text" name="ttc3"></p><!-- 4  -->
                                    <p><label>Coloris 4</label><input type="text" name="col4"></p>
                                    <p><label>Prix HT 4</label><input type="text" name="ht4"></p>
                                    <p><label>Prix TTC 4</label><input type="text" name="ttc4"></p><!-- 5  -->
                                    <p><label class="lmodal">Coloris 5</label><input class="lmodal" type="text" name="col5"></p>
                                    <p><label class="lmodal">Prix HT 5</label><input class="lmodal" type="text" name="ht5"></p>
                                    <p><label class="lmodal">Prix TTC 5</label><input class="lmodal" type="text" name="ttc5"></p><!-- 6  -->
                                    <p><label>Coloris 6</label><input type="text" name="col6"></p>
                                    <p><label>Prix HT 6</label><input type="text" name="ht6"></p>
                                    <p><label>Prix TTC 6</label><input type="text" name="ttc6"></p>
 
                                        <input type="submit" name="update" value="Modifier">
                                        <input type="reset" value="Annuler">
                                        <input type="submit" value="Fermer" onclick="$dialog.close()">
                                    </p>
                                </fieldset>
                            </table>
                        </dialog>
                        </script>
                        <script src="../js/userDialog.js"></script>
                        </dialog>
                </form>
            </section>
        </div>
        <script src="../js/userlist.js"></script>
 
 
</body>
 
</html>

Et le résultat visuel:

Nom : Sans titre.jpg
Affichages : 100
Taille : 100,2 Ko

**NoSmoking** · 22/02/2024, 18h49

Bonjour,
in fine quel est le but, envoyer les données modifier au serveur ?

Si oui il faudrait mettre une url à l'action sur le formulaire.

La construction d'un élément <dialog> se fait généralement de cette façon

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<dialog id="form-dialog">
  <form id="form-modal" method="POST" action="action-formulaire.php">
    <!--
    les champs du formlaire
    -->
  </form>
</dialog>

et pour l'affichage un simple

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
// pour l'afficher
document.getElementById("form-dialog").showModal();
// pour la masquer
document.getElementById("form-dialog").closel();

ceci étant il te faut avoir une relation entre tes cellules et les champs de ton formulaire.
Ceci peut se faire de maintes façons, la plus simple est de suivre l'ordre chrono des cellules mais si tu ne souhaites pas tout soumettre tu peux avoir recours à une liason via l'attribut data, data-name par exemple.

Exemple dans ta <table> on trouve :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<td data-name="code-article">AMA-1000</td>
<td data-name ="col1" class="hidden">001</td>
<td data-name ="ht1"  class="hidden">120</td>
<td data-name ="ttc1" class="hidden">126</td>
<!-- etc -->

et dans le formulaire les champs correspondants

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<p><label class="lmodal">Code Article</label><input class="lmodal" type="text" name="code-article" readonly></p>
<p><label class="lmodal">Coloris 1</label><input class="lmodal" type="text" name="col1"></p>
<p><label class="lmodal">Prix HT 1</label><input class="lmodal" type="text" name="ht1"></p>
<p><label class="lmodal">Prix TTC 1</label><input class="lmodal" type="text" name="ttc1"></p>
<!-- etc  -->

... ensuite pour ta fonction de récupération tu peux faire quelque chose comme :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function transfertModale(ligneRef) {
  const elements = ligneRef.querySelectorAll("[data-name]");
  const formulaire = document.getElementById("form-modal");
  elements.forEach((el) => {
    const name = el.dataset.name;           // récup. nom du champ associé
    const elemDest = formulaire.querySelector("[name='" + name + "']")
    if (elemDest) {
      elemDest.value = el.textContent;
    }
  });
}

voilà en gros

**Raptor92** · 22/02/2024, 19h27

Bonsoir,

Mille merci, c'est mieux en effet et fonctionnel
Encore merci

Afficher des données dans une fenêtre modale

HTML

Discussions similaires

Partager

Partager