begin process at 2012 05 29 23:06:44
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

récupérer des champs créer dynamiquement


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

récupérer des champs créer dynamiquement

mercredi 9 mars 2011 à 10:34:59 | récupérer des champs créer dynamiquement

farsicomores

bonjour je suis entrain de faire un formulaire de saisi et je créer les champs dynamiquement et et je voudrais calculé les valeurs mais je n'y arrive pas car j'ai concaténé les id pour que ça donne des noms différent mais je ne sais pas comment récupéré les id concaténés.
voici mon code, d’ailleurs une partie du code j'ai trouvé les idées ici.
Code Javascript :
<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>


------
Code HTML :
<html>
<body onload="Create_Ligne();">
    
                                      <table id="fact-tablee" style="width:507px;margin-top:10px;" cellpadding="0" cellspacing="0">
                                        	<tr>
                                            	<th class="corn-fact-t-l"></th>
                                                <th class="fact-heade" style="width:166px;">DESIGNATION</th>
                                           	  	<th class="fact-heade" style="width:58px;">Qt&eacute;</th>
                                                <th class="fact-heade" style="width:82px;">P.U.</th>
                                            	<th class="fact-heade" style="width:38px;">TVA</th>
                                                <th class="fact-heade" style="width:60px;">PRIX HT</th>
                                            	<th class="fact-heade" style="width:59px;">PRIX TTC</th>
                                                <th class="fact-heade" style="width:30px;"></th>
                                                <th class="corn-fact-t-r"></th>
                                            </tr>
                                                                                       
                                      </table>
									  
									  <table>
									        <tr>
									              <th><input 	type="button" onclick="Create_Ligne();" value="Ajouter" /> </th>
									        </tr>
									  </table></html>

dimanche 13 mars 2011 à 14:39:19 | Re : récupérer des champs créer dynamiquement

007Julien


L'utilisation de getElementsByTagNames permet de récupérer les inputs existants, puis de calculer les produits à partir des quantités ...

Code Javascript :
var tslNpt=document.getElementsByTagNames('input'),npt,idx,lgn;
// Appeler tous les inputs  
for (var i=0;i<tlsInp.length;i++) {npt=tlsInp[i];
   // Récupérer leur id (idx)
   idx=npt.id;
   // et les numéros de lignes des inputs qte
   if (ids.substr(0,3)=='qte') {lgn=parseInt(npt.id.substr(3));
   // Calculer les produits avec leurs id : idx et les id reconstitués 'pu'+lgn ...
   }
}

Le code serait plus homogène avec un règle de construction des noms (par exemple les trois premières consonnes) qui permettrait par exemple (avec dsg, qnt et prx) de retrouver sans hésitations les désignations, quantité et prix unitaires

Attention encore aux virgules pour les centimes qu'il faut remplacer par des points pour faire les calculs en javasript

Code Javascript :
prixPourCalcul=prixEdition.replace(/,/,'.');
prixEdition=prixPourCalcul.replace(/\./,','); 


Cette discussion est classée dans : row, obj, innerhtml, cell, insertcell


Répondre à ce message

Sujets en rapport avec ce message

Probleme de calcule dynamique [ par farsicomores ] Bonjour l'équipe! Je suis entrain de travailler sur un site et je suis bloqué sur un script que j'ai récupéré ici et je vous l'envoie s'il est possi Probleme de calcule dynamique [ par farsicomores ] Bonsoir! Je suis entrain de faire un formulaire qui calcule un devis automatiquement. pour cela je crée des champs dynamiquement pour permettre de sai Récupération des champs input js en php [ par farsicomores ] Bonjour! Je suis entrain de faire un formulaire dynamique en js qui marche bien. Maintenant je voudrais récupéré les champs en php pour insérer dans l à l'aide c'est urgent [ par OuntaMalek ] Bonjour,je suis débutant et je travaille sur un tableau dynamique ou on ajoute des lignes/ des colonnes. le problème c'est que je dois calculer deux m Dupliquer une ligne d'un tableau html javascript DOM [ par lord1366 ] Bonjour, voici mon problème : Je voudrais copier une ligne d'un tableau html (celà fonctionne sous Mozilla, Opera, Safari, IE8 mais pas sous IE6 et I obj.innerHTML [ par fgingat ] Bonjour à tous .. Voila mon premier poste concerne un soucis de comprehension de la methode de fonctionnement de obj.innerHTML  A savoir sur une page Javascript XML et Mozilla [ par opeo31 ] Bonjour,j'ai un très gros souci sur mon code qui marche bien sur IE, mais plante sur Mozilla.En effet il s'agit en gros de récupérer le choix d'un uti probleme j'arrive pas insérér des donnée dans mon tableaux dynamique ligne par ligne svp aidez moi ?!!!! [ par styler31 ] je dois réaliser pour mon stage un programme qui me permet remplir un bon de livraison.en fait il faudrait réaliser un tableau dynamique qui appelle u Affectation d'un fonction pour un evenement pour IE et FF? [ par dudulebzh35 ] Bonjour a tous,J'ai une liste avec le nom de fichiers et de repertoires (dans une table). Lorsque je clique sur un repertoire, je vois ses fichiers, Rajouter des valeur a this dans Mootools pour l'envoyer avec AJAX [ par jnbdzjnbdz ] Bonjour, j'utilise mootools 1.2 comme library, mais ses pas vraiment une question qui a rappore avec mootools mais plus avec des fonctionaliter avance


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,059 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales