Partage
  • Partager sur Facebook
  • Partager sur Twitter

Récupérer les valeurs des data-* pour un Insert

Jean-PAT
16 juillet 2019 à 13:59:53

Bonjour, 

J'ai un problème, malgré de nombreuses recherches, je n'arrive toujours pas à récupérer les données implantées à mes images HTML en Javascript...

Voici mon code :

<?php
  $repInclude = './include/';
  require($repInclude."_init.inc.php");
  $bdd = new PDO('mysql:host=127.0.0.1;dbname=bdd_suiviimprim3d;charset=utf8', 'root', '');
  $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
?>

        <html>
                <head>
                    <title>Suivi de production de l'entreprise NORMENJEU</title>
                    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                    <link href="style/Style_Doss.css" rel="stylesheet" type="text/css" /> 
                    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
                </head>                                                

                <body>

                                    <?php
                                        require($repInclude."_sommaire.inc.php");
                                    ?>

                                    <div id="contenu">
                                                <form method="POST">
                                                        <legend>Entrer votre Dossier d'affaire :</legend>
                                                        
                                                        <div id='nDevi'>
                                                            <label for='txtDevis'>N° de Devis :</label> 
                                                                            <input type='text' id='txtDevis' name='txtDevis' class='Ndevis'  placeholder="#"/>
                                                                                <br/>
                                                                            <label for="txtClient"> Nom du client :</label>
                                                                            <input type='text' id='txtClient' name='txtClient' class='Nclient' placeholder="Entrer le client"/>
                                                                                <br/>
                                                                            <label for='Porteur'>Le porteur du dossier :</label> 
                                                                            <select name='Porteur' id='Porteur'class='PorteurDoss'>
                                                                                <option value="" selected='selected'>Porteur du dossier</option>
                                                                                <option value="Normenjeu">Normenjeu</option>
                                                                                <option value="Manecan">Manecan</option>
                                                                            </select></div>
                                                        
                                 <div class="images_pages">
                                                            <center>
                                                                <legend>Produits Plein</legend>
                                                                        <div class="part-produits">
                                                                            <div class="item_2">
                                                                                    <img id="Lugdocase1"  data-valeur="795" height="auto" src="Images_Produits/Valise/lugdocase_1_480x.png" title="Choisir la Lugdocase 1" alt="Lugdocase 1" style="border:solid 2px black; height:auto; width:10%;"/>
                                                                                    <img id="Lugdocase2"  data-valeur="382"  height="auto" src="Images_Produits/Valise/lugdocase_2_480x.png" title="Choisir la Lugdocase 2" alt="Lugdocase 2" style="border:solid 2px black; height:auto; width:10%;"/>
                                                                            </div>
                                                                        </div>
                                                                    <center>
                                                                     <fieldset id="productions">
                                                                         <caption>Valise 1 </caption>
                                                                         <div class="part-productions">
                                                                             <div class="item">
                                                                                 <img id="MC101" data-valeur="" src="Images_Produits/Gabarits/MC1/MC101.png" title="Choisir la production du MC101" value="MC101" alt="MC101" style="height: 10% ; width: auto;"/>
                                                                             </div>
                                                                             
                                                                             <div class="item">
                                                                                 <img id="MC102" src="Images_Produits/Gabarits/MC1/MC102.png" title="Choisir la production du MC102" alt="MC102" style="height: 10% ; width: auto;" />
                                                                             </div>
                                                                             
                                                                             <div class="item">
                                                                                 <img id="MC103" src="Images_Produits/Gabarits/MC1/MC103.png" title="Choisir la production du MC103" alt="MC103" style="height: 10% ; width: auto;" />
                                                                             </div> 
                                                                                 
                                                                             <div class="item">
                                                                                 <img id="MC104" src="Images_Produits/Gabarits/MC1/MC104.png" title="Choisir la production du MC104" alt="MC104" style="height: 10% ; width: auto;" />
                                                                             </div>  
                                                                                 
                                                                             <div class="item">
                                                                                 <img id="MC111" src="Images_Produits/Gabarits/MC1/MC111.png" title="Choisir la production du MC111" alt="MC111" style="height: 10% ; width: auto;" />
                                                                             </div>  
                                                                                 
                                                                             <div class="item">
                                                                                 <img id="MC112" src="Images_Produits/Gabarits/MC1/MC112.png" title="Choisir la production du MC112" alt="MC112" style="height: 10% ; width: auto;" />
                                                                             </div>
                                                                                
                                                                             <div class="item">
                                                                                 <img id="MC113" src="Images_Produits/Gabarits/MC1/MC113.png" title="Choisir la production du MC113" alt="MC113" style="height: 10% ; width: auto;" />
                                                                             </div>
                                                                             
                                                                             </div>
                                                                     </fieldset>
                                                                     </center>
                                                                     <br/>
                                                                     <center>
                                                                     <fieldset id="productions_2">
                                                                         <caption>Valise 2</caption>
                                                                         <div class="part-productions_2">
                                                                             
                                                                             <div class="item">
                                                                                 <img id="MC201" src="Images_Produits/Gabarits/MC2/MC201.png" title="Choisir la production du MC201" alt="MC201" style="height: 10% ; width: auto;" />
                                                                             </div>     
                                                                                 
                                                                             <div class="item">
                                                                                 <img id="MC202" src="Images_Produits/Gabarits/MC2/MC202.png" title="Choisir la production du MC202" alt="MC202" style="height: 10% ; width: auto;" />
                                                                             </div>     
                                                                                 
                                                                             <div class="item">
                                                                                 <img id="MC203" src="Images_Produits/Gabarits/MC2/MC203.png" title="Choisir la production du MC203" alt="MC203" style="height: 10% ; width: auto;" />
                                                                             </div>
                                                                             
                                                                        </div>
                                                                     </fieldset>
                                                                     </center>
                                                                     <br/>                            
                                                                     <center>
                                                                     <fieldset id="productions_3">
                                                                         <caption>Autres</caption>
                                                                         <div class="part-productions_3">
                                                                             
                                                                            <div class="item">
                                                                                 <img id="IC101" src="Images_Produits/Gabarits/IC101.png" title="Choisir la production du IC101" alt="IC101" style="height: 10% ; width: auto;" />
                                                                            </div>    
                                                                                 
                                                                             <div class="item">
                                                                                 <img id="IC102" src="Images_Produits/Gabarits/IC102.png" title="Choisir la production du IC102" alt="IC102" style="height: 10% ; width: auto;" />
                                                                             </div>
                                                                             
                                                                        </div>
                                                                     </fieldset>
                                                                     </center>
                                                            </center>
                                    </div>
                                                        
                                                        <div id="bas de page">
                                                                        <br/>
                                                                                <label for="dateLivraison">Date de Livraison :</label>
                                                                                <input type="date" name="dateLivraison"/>
                                                                                <label for="SoldeCommande">Commande soldé quand :</label>
                                                                                <input type="date" name="SoldeCommande"/><br/><br/>
                                                                            <center>
                                                                                <input type="submit" name="ValiderGen" id="Imprimer" value="Valider les données saisies"/>
                                                                            </center><br/>
                                                                            <center>
                                                                                <a href="cDossAffaire.php">Pour visionner un  dossier d'affaire, cliquez-ici!</a>
                                                                            </center>
                                                                        </div>
                                                                    </form>
                                    </div>

                                        
                                            <!-- Optional JavaScript -->
                                            <!-- jQuery first, then Popper.js, then Bootstrap JS -->
                                                <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
                                                <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
                                                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>           
                                        
                    <script>  
                        $(function() {
                                $('#productions').hide();
                                $('#productions_2').hide();
                                $('#productions_3').hide();
                                
                                $('#Lugdocase1').click( function (){
                                   $('#productions').show(); 
                                })
                                $('#Lugdocase2').click( function (){
                                   $('#productions_2').show(); 
                                })
                                
                                $('#Lugdocase1').dblclick( function (){
                                   $('#productions').hide(); 
                                })
                                $('#Lugdocase2').dblclick( function (){
                                   $('#productions_2').hide(); 
                                })
                                
                                
                        });
                       
                        document.addEventListener('DOMContentLoaded', () => {
                         const items = document.querySelectorAll('.item');
                            items.forEach((item) => {
                            item.addEventListener('click', () => {
                            //Ici tu fais ce que tu veux 
                            item.classList.add('visible');
                                })
                            })
                        })
                        document.addEventListener('DOMContentLoaded', () => {
                         const items_2 = document.querySelectorAll('.item_2');
                            items.forEach((item) => {
                            item.addEventListener('click', () => {
                            //Ici tu fais ce que tu veux 
                            item.classList.add('visible');
                                })
                            })
                        })
                        
                        selectedItems = document.querySelectorAll('.item.visible');
 
                        selectedItems.forEach((selectedItem) => {
                        // Faire quelque chose ici avec ta variable selectedItem
                        })
                    </script>
                </body>
        </html>

                <?php
                    include($repInclude."Insert_Produit.php");
                ?>

Merci beaucoup pour vos réponses par avance ;)

-
Edité par Jean-PAT 16 juillet 2019 à 14:01:08

  • Partager sur Facebook
  • Partager sur Twitter
Angelisium
  • Javascript
16 juillet 2019 à 14:40:31

Bonjours,

Pour récupérer la valeurs d'un attributs data en javascript tu peut utiliser cette méthode : 

const IMG_ID= 'test';
const DATA_TRUC= 'data-truc';

//valeur de l'attr data-truc:
document.getElementById(IMG_ID).attributes[DATA_TRUC].value;
  • Partager sur Facebook
  • Partager sur Twitter

    !

AliasDmc
  • Javascript
16 juillet 2019 à 19:00:13

Bonjour Jean-PAT,

Pour les attribut de type data-* tu peux utiliser dataset.nom

const IMG_ID= 'test';
 
//valeur de l'attr data-truc:
document.getElementById(IMG_ID).dataset.truc;


Attention au Nommage :

data-truc-bidule-etc => dataset.trucBiduleEtc

Si tu fais :

HTMLelement.dataset.monTruc = '55';

 Alors un attribut data--mon-truc = '55' est créé

-
Edité par AliasDmc 16 juillet 2019 à 19:00:43

  • Partager sur Facebook
  • Partager sur Twitter
Découvrez les Css avec la zonecss.fr
Jean-PAT
17 juillet 2019 à 9:28:45

AliasDmc a écrit:

Bonjour Jean-PAT,

Pour les attribut de type data-* tu peux utiliser dataset.nom

const IMG_ID= 'test';
 
//valeur de l'attr data-truc:
document.getElementById(IMG_ID).dataset.truc;


Attention au Nommage :

data-truc-bidule-etc => dataset.trucBiduleEtc

Si tu fais :

HTMLelement.dataset.monTruc = '55';

 Alors un attribut data--mon-truc = '55' est créé

-
Edité par AliasDmc il y a environ 14 heures


Merci pour vos réponses sur la récupération des données, mais après la seule chose que je ne sais pas, une fois qu'on les a récupéré, comment les insérées dans ma bdd?

  • Partager sur Facebook
  • Partager sur Twitter