IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Afficher des données dans une fenêtre modale


Sujet :

HTML

  1. #1
    Membre éclairé Avatar de Raptor92
    Homme Profil pro
    Directeur des opérations & Innovation
    Inscrit en
    Juin 2009
    Messages
    953
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Directeur des opérations & Innovation
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2009
    Messages : 953
    Points : 766
    Points
    766
    Par défaut Afficher des données dans une fenêtre modale
    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);
    });
    Raptor92
    Dominique
    Aucune aide par MP, utilisez le forum.

    Mon guide du débutant pour apprendre à programmer en Java - N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java


  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 234
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 234
    Points : 15 531
    Points
    15 531
    Par défaut
    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é.

  3. #3
    Membre éclairé Avatar de Raptor92
    Homme Profil pro
    Directeur des opérations & Innovation
    Inscrit en
    Juin 2009
    Messages
    953
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Directeur des opérations & Innovation
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2009
    Messages : 953
    Points : 766
    Points
    766
    Par défaut RE
    Bonjour,

    Il y est
    Raptor92
    Dominique
    Aucune aide par MP, utilisez le forum.

    Mon guide du débutant pour apprendre à programmer en Java - N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java


  4. #4
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 234
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 234
    Points : 15 531
    Points
    15 531
    Par défaut
    il y a du code php dans votre code, il s'agit du code source qu'on ne peux pas tester.

  5. #5
    Membre éclairé Avatar de Raptor92
    Homme Profil pro
    Directeur des opérations & Innovation
    Inscrit en
    Juin 2009
    Messages
    953
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Directeur des opérations & Innovation
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2009
    Messages : 953
    Points : 766
    Points
    766
    Par défaut RE
    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>
    Raptor92
    Dominique
    Aucune aide par MP, utilisez le forum.

    Mon guide du débutant pour apprendre à programmer en Java - N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java


  6. #6
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 234
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 234
    Points : 15 531
    Points
    15 531
    Par défaut
    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.

  7. #7
    Membre éclairé Avatar de Raptor92
    Homme Profil pro
    Directeur des opérations & Innovation
    Inscrit en
    Juin 2009
    Messages
    953
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Directeur des opérations & Innovation
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2009
    Messages : 953
    Points : 766
    Points
    766
    Par défaut RE
    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 : 95
Taille : 100,2 Ko
    Raptor92
    Dominique
    Aucune aide par MP, utilisez le forum.

    Mon guide du débutant pour apprendre à programmer en Java - N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java


  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 959
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 129
    Points
    44 129
    Par défaut
    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

  9. #9
    Membre éclairé Avatar de Raptor92
    Homme Profil pro
    Directeur des opérations & Innovation
    Inscrit en
    Juin 2009
    Messages
    953
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Directeur des opérations & Innovation
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2009
    Messages : 953
    Points : 766
    Points
    766
    Par défaut RE
    Bonsoir,

    Mille merci, c'est mieux en effet et fonctionnel
    Encore merci
    Raptor92
    Dominique
    Aucune aide par MP, utilisez le forum.

    Mon guide du débutant pour apprendre à programmer en Java - N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java


Discussions similaires

  1. Afficher donnée dynamiques dans fenêtre modale
    Par karamaster dans le forum Langage
    Réponses: 16
    Dernier message: 03/03/2015, 09h34
  2. Ouvrir page dans fenêtre modale
    Par Prav26 dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 0
    Dernier message: 25/04/2014, 13h59
  3. Afficher $get dans fenêtre modale ?
    Par gastoncs dans le forum jQuery
    Réponses: 2
    Dernier message: 25/10/2012, 17h12
  4. Affichage d'un PDF dans fenetre modale
    Par rico031 dans le forum Développement Web en Java
    Réponses: 2
    Dernier message: 28/09/2008, 22h06
  5. tri dates dans fenêtre modale
    Par TBMB51 dans le forum IHM
    Réponses: 1
    Dernier message: 12/11/2007, 09h12

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo