Partage
  • Partager sur Facebook
  • Partager sur Twitter

récupération des champs dynamique en js

    9 mars 2011 à 12:25:15

    Bonjour l’équipe!
    Pour commencer c'est juste vous dire que je suis nouveau en js et je l'ai appris ici "siteduzero".

    Je suis entrain de faire un formulaire de devis. Il permet de creer des champs dynamiquement et les supprimer si on veut. tout est ok pour ça.

    Mon problème maintenant c'est de récupérer les valeurs des champs qui sont crées dynamiquement afin de calculer ses valeurs "sur la fonction calcul()" . Toute fois je suis bloqué car j’arrive pas à récupérer l'id envoyé. puisque je l'ai concaténé avec le nombre des ligne afin de les distinguer.
    Ci-joint mon script:
    <form name="frm"> 
                                          <table id="fact-tablee" style="width:507px;margin-top:10px;" cellpadding="0" cellspacing="0">
                                            	<tr>
                                                	<th class="corn-fact-t-l"></th>
                                                    <th  style="width:166px;">DESIGNATION</th>
                                               	  	<th  style="width:58px;">Qt&eacute;</th>
                                                    <th  style="width:82px;">P.U.</th>
                                                	<th  style="width:38px;">TVA</th>
                                                    <th  style="width:60px;">PRIX HT</th>
                                                	<th  style="width:59px;">PRIX TTC</th>
                                                    <th  style="width:30px;"></th>
                                                    <th></th>
                                                </tr>    
    											<tr>
    											    <th><input type="button" onClick="Create_Ligne()"></th>
    											</tr>
                                                
                                          </table>
    									  
    </form>
    


    ------------------------------------
    <script language="javascript">
    
    //---------------
    function Calcul(){
    	
         var Obj   = null,
          Qte,
          Prix,
          Total = 0,
          Valeur;
    	  
      //-- tant que l'objet existe
      while( Obj = document.getElementById('qte')){
        //-- recup des valeurs
        Qte    = parseInt( Obj.value);
    		
        Prix   = parseFloat( document.getElementById('pu').value);
    	Valeur = Qte * Prix;  // pas mis les tests si isNaN
        //-- affiche le resultat
        document.getElementById('montant').value = Valeur;
        //-- ajoute dans total
        Total += Valeur;
        //-- au suivant
        Ind ++;
      }
      //-- mets dans total
     // document.getElementById( "total").value = Total;
    }
    
    
    
    var Compteur = 0;
    //--------------------------
    function Delete_Ligne( obj_){
      var Parent;
      var Obj = obj_;
      if( Obj){
        //-- tant que pas la balise <TR>
        do{
           Obj = Obj.parentNode;
        }while( Obj.tagName != "TR")
        //-- Recup du parent
        Parent = Obj.parentNode;
        //-- Suppression de la ligne
        if( Parent){
          Parent.deleteRow( Obj.rowIndex)
        }
      }
    }
    //----------------------
    function Create_Ligne(){
      //-- compteur pour le FUN
      Compteur++;
      //-- Get objet tableau
      var O_Table = document.getElementById('fact-tablee');
      //-- Get nombre de ligne du tableau
      var NbrLigne = O_Table.rows.length;
      //-- Position d'insertion
      var Pos = NbrLigne;
      //-- Insertion d'une ligne
      O_Row  = O_Table.insertRow( Pos);
       
      //-- Insertion des cellules
      O_Cell = O_Row.insertCell(-1);
      O_Cell.innerHTML = O_Row.rowIndex;
      var ligne=parseInt(O_Cell.innerHTML);  //recupere le nombre de la ligne
     
        
      //alert(ligne);
      
      O_Cell = O_Row.insertCell(-1);
      O_Cell.innerHTML = '<div align="center"><input type="text" id="designation'+ligne+'" name="designation'+ligne+'" class="inp-design" value="designation n°' +Compteur +'"/></div><div class="separateur">&nbsp;</div>';
      
      O_Cell = O_Row.insertCell(-1);
      O_Cell.innerHTML = '<div class="border" style="text-align:center;"><input type="text"  id="qte'+ligne+'" name="qte'+ligne+'"      class="inp-qte"  onKeyUp="Calcul()" /></div><div class="separateur">&nbsp;</div>';
      
      O_Cell = O_Row.insertCell(-1);
      O_Cell.innerHTML = '<div class="border" style="text-align:center;"><input type="text"  id="pu'+ligne+'" name="pu'+ligne+'" class="inp-pu"  onKeyUp="Calcul()"/></div><div class="separateur">&nbsp;</div>';
      
      O_Cell = O_Row.insertCell(-1);
      O_Cell.innerHTML = '<div class="border" style="text-align:center;height:18px;"> 0</div><div class="separateur">&nbsp;</div>';
      
      O_Cell = O_Row.insertCell(-1);
      O_Cell.innerHTML = ' <div class="border" style="text-align:center;height:18px;">  <input type="text" id="montant'+ligne+'" name="montant'+ligne+'"  class="inp-pu" /></div><div class="separateur">&nbsp;</div>';
      
      O_Cell = O_Row.insertCell(-1);
      O_Cell.innerHTML = '<div class="border" style="text-align:center;height:18px;">0 € </div><div class="separateur">&nbsp;</div>';
      
       
      O_Cell = O_Row.insertCell(-1);
      O_Cell.innerHTML = '<div class="border" style="text-align:center;height:18px;"><input type="image" src="images/cross.png" onClick="Delete_Ligne(this)" /></div><div class="separateur">&nbsp;</div>';
      
     O_Cell = O_Row.insertCell(-1);
     O_Cell.innerHTML = '<div class="fact-b-r"></div>';  
    }
    
    </script>
    
    • Partager sur Facebook
    • Partager sur Twitter
      9 mars 2011 à 13:14:51

      getElementById te renverra qu'un seul objet puisqu'un id en principe n'est affecté qu'à un seul objet. Je te conseille d'utiliser plutôt class avec getElementsByClass qui te renverra tous les éléments ayant la même classe
      • Partager sur Facebook
      • Partager sur Twitter
        9 mars 2011 à 14:11:03

        merci de votre aide, mais je pense que cela va me faire changé tout ce que j'avais fait, j'ai plutot besoin de parcourir les ligne créer afin de recuperer leurs valeurs. mais le fait que j'ai concatenéné l'id avec ligne je ne sais pas comment le recuper.
        • Partager sur Facebook
        • Partager sur Twitter
          9 mars 2011 à 14:16:55

          Non. Tu rajoute juste à ta ligne pour quantité la classe quantité puis tu les récupère comme je te l'ai dit plus tôt. Rien de plus simple.
          • Partager sur Facebook
          • Partager sur Twitter
            9 mars 2011 à 14:39:16

            Salut,

            Je viens juste troller un peu sur ton sujet (bah oui, c'est un sale rôle mais si personne ne le fait :p ) .
            Ta façon de créer des champs avec innerHTML c'est pas terrible, vaut mieux utiliser un beau DOM (enfin je veux dire tu viens de créer une classe de dingue pour faire ton formulaire dynamique t'es plus à "ça" près ^^ ).

            PS [tout aussi inutile, mais qui a illuminé ma journée] :

            Citation

            Bonjour l'équipe


            J'adore ça fait plaisir :D


            Peace
            • Partager sur Facebook
            • Partager sur Twitter
              9 mars 2011 à 14:55:12

              un petit exemple svp afin d'y voire claire!!!
              • Partager sur Facebook
              • Partager sur Twitter
                9 mars 2011 à 15:03:13

                Remplace :
                O_Cell = O_Row.insertCell(-1);
                  O_Cell.innerHTML = '<div class="border" style="text-align:center;"><input type="text"  id="pu'+ligne+'" name="pu'+ligne+'" class="inp-pu"  onKeyUp="Calcul()"/></div><div class="separateur">&nbsp;</div>';
                

                Par :
                O_Cell = O_Row.insertCell(-1);
                  O_Cell.innerHTML = '<div class="border" style="text-align:center;"><input type="text"  id="pu'+ligne+'" name="pu'+ligne+'" class="inp-pu inp-qte"  onKeyUp="Calcul()"/></div><div class="separateur">&nbsp;</div>';
                

                Puis en javascript tu calcul comme ça :
                var total=0;
                for (qte in document.getElementsByClass("inp-qte") {
                total += parseInt(qte);
                }
                
                • Partager sur Facebook
                • Partager sur Twitter
                  9 mars 2011 à 21:18:14

                  Salut, tout le monde. Je vous remercie quand même de votre aide. Mais j'ai réussi à régler mon problème autrement sans suivre les pistes que vous m'aviez donné. Et entant qu'un zéro je ferme le débat en laissant ma porte ouverte pour les zéros qui auront besoin de mon script.
                  @+ de la part de comodo pour les comako (^_^)
                  • Partager sur Facebook
                  • Partager sur Twitter

                  récupération des champs dynamique en js

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                  • Editeur
                  • Markdown