Des calculs dynamiques

**sfarouk** · 08/03/2011, 18h52

Bonjour tout le monde!
Je suis entrain de travailler sur une application au niveau de ma réalisation et je suis bloqué sur un script pendant 2 jours et j'avoue que je ne suis pas bon en javascript.

Je suis entrain de travailler sur un formulaire de saisie de devis qui laisse la possibilité d'ajouter autant des champs de saisie dynamiquement que l'on veut et supprimer quand on le souhaite, à ce niveau tout est parfait.

Ensuite, à la saisie de quantité et prix_unitaire, on doit avoir le montant calculé directement. du coup pour la premiere ligne ça marche, il effectue les calcules mais les autres champs ne marche pas.

j'ai ci-joint mon fichier qui contient le script que j'ai aussi documenté.
Merci

Code html :

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
<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>
 
 
<script language="javascript">
//---------------
function Calcul(){
 
     var Ind=1,
	  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(i){
  //-- 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;
 
  O_Cell = O_Row.insertCell(-1);
  O_Cell.innerHTML = '<div align="center"><input type="text"  name="designation[]" 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" name="qte[]"      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" name="pu[]" 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" name="montant[]"  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>
</body>
</html>

**andry.aime** · 08/03/2011, 19h10

Bonsoir,

1- Tu déclares la fonction avec une paramètre et tu l'appelles sans paramètre.

function Create_Ligne(i){

onclick="Create_Ligne();"

2- C'est bien normale que ça ne marche que pour la première ligne car tu as des id qui se répète avec la façon dont tu crées les lignes. Un id doit être unique dans un document. Concatène les id avec la variable Compteur et tu faits la boucle selon sa valeur pour le calcul.

A+.

**sfarouk** · 09/03/2011, 11h23

merci beaucoup pour votre aide.
j'ai bien tenue compte de vos remarques, toute je me trouve bloqué je ne sais pas comment vais je récupéré un id concaténé.
voila où j'en avec le code, je récupère le numéro de la ligne que je concatène avec le champs afin de donner des noms différents aux champs, mais je ne sais pas comment récupéré cet id concaténé au niveau de ma fonction calcule.
encore 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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
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>';  
}

**RomainVALERI** · 09/03/2011, 11h49

Code javascript :

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

while( Obj = document.getElementById('qte'))

???

1) ne confonds pas "=" et "==". Ici, tu ne compares pas les deux termes, tu assignes l'élément ciblé dans ta variable Obj donc ça renverra toujours true si l'élément existe

2) Même quand l'opérateur sera "réparé", dans ta boucle, tu ne modifies jamais Obj donc ça va boucler à l'infini...

Tu voulais boucler sur l'ensemble des éléments ?

Si oui il te faut en fin de boucle une ligne qui attribue dans ta variable Obj le "prochain" objet de la collection ^^

**sfarouk** · 09/03/2011, 12h00

oui j'ai bien compris pour ça, mais au fait si vous remarquez mes id sont envoyés de la sorte:

Code :

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

id="qte'+ligne+'"

, alors comment pourrais je récupéré cela sur ma fonction calcul(),

Code :

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

Obj = document.getElementById('qte' ?)

afin de distinguer les lignes envoyés. pour e
merci

**NoSmoking** · 09/03/2011, 14h04

Bonjour,
il est clair que le script original n'est pas fait pour ce que tu veux faire, j'entends par là supprimer des éléments ligne une fois crées.
Il te faudrait au moins ceci

Code :

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

1
2
  var i = 1;
  while(( Obj = document.getElementById( "qte_" +i))){

pour pouvoir parcourir tous tes éléments, come te l'a indiqué

Envoyé par RomainVALERI

2) Même quand l'opérateur sera "réparé", dans ta boucle, tu ne modifies jamais Obj donc ça va boucler à l'infini...

Le HIC, parce qu'il y en a un, est que si tu supprimes une ligne ta boucle s'interrompra avant la fin, ça c'est balot....

La solution passe par les name en utilisant la méthode getElementsByName.

Pour ce faire mets un name identique du type "qte[]", les crochets font partie du name, qui de plus te permettera de récupérer cela facilement coté PHP

**andry.aime** · 09/03/2011, 19h45

Bonsoir,

var i = 1;
while(( Obj = document.getElementById( "qte_" +i))){

C'est pas beau car il y a suppression de ligne, du cout, s'il i est égal à l'indice du premier ligne supprimer, il sort du boucle. Le mieux c'est d'utilisé le name.

PS: Le remarque de Romain.
A+.

**sfarouk** · 09/03/2011, 19h57

oui effectivement je me suis rendu compte qu'avec les id j'aller avoir un autre probleme pour la recuperation des données avec php et voila ce que j'ai fait actuelement meme si rien ne marche toujours

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
<html >
<body onload="Create_Ligne(1)">
<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>
 
 
                                      </table>
									<table>
									<tr>
									<th><input type="button" onClick="Create_Ligne(1)" value="creer_1ligne">                                       
                                                </th>
									<td ><input type="button" value="plusligne" onClick="Create_Ligne(document.getElementById('nbLigne').value)">
									<input type="text" name="nbLigne" id="nbLigne" class="ligne_a_creer" /></td>
</fom>
 
 
<script language="javascript">
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(i){
  //-- compteur pour le FUN
 
  //-- 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;
 
  var ligne_a_creer= i; //nombre de ligne à créer
  var j;
  for(j=0; j<ligne_a_creer; j++){
   Compteur++;
  //-- Insertion d'une ligne
  O_Row  = O_Table.insertRow( Pos);
  //-- Insertion des cellules
  O_Cell = O_Row.insertCell(-1);
  O_Cell.innerHTML = '<div class="fact-b-l"></div>';
 
  O_Cell = O_Row.insertCell(-1);
  O_Cell.innerHTML = '<div align="center"><input type="text"  name="designation[]" 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" name="qte[]"  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"  name="pu[]"  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="pht" name="pht[]"  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 &euro; </div><div class="separateur">&nbsp;</div>';
 
  if(NbrLigne==1){
  O_Cell = O_Row.insertCell(-1);
  O_Cell.innerHTML = '<div class="border" style="text-align:center;height:18px;"></div><div class="separateur">&nbsp;</div>';
  }
  else{
  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>';
 
  }
 
 
//---------------
function Calcul(){
 
     var i=1,
	 Obj   = null,
      Qte,
      Prix,
      Total = 0,
      Valeur;
 
  //-- tant que l'objet existe
  while( Obj = document.getElementByName('qte[]'+i)){
     //-- recup des valeurs
    Qte    = parseInt( Obj.value);
 
    Prix   = parseFloat( document.getElementById('pu[]'+i).value);
	Valeur = Qte * Prix;  // pas mis les tests si isNaN
 
    //-- affiche le resultat
    document.getElementByName('pht[]'+i).value = Valeur;
    //-- ajoute dans total
    Total += Valeur;
    //-- au suivant
    i++;
  }
  //-- mets dans total
  document.getElementById( "total").value = Total;
}
 
</script>
 
</body>
</html>

**andry.aime** · 09/03/2011, 20h02

Re,

while( Obj = document.getElementByName('qte[]'+i))

Code :

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

1
2
3
4
5
var qtes=document.getElementByName('qte[]');
for(var i; i< qtes.length; i++){
   Qte    = parseInt( qtes[i].value);
    Prix   = parseFloat( document.getElementByName('pu[]')[i].value);
.........

A+.

**andry.aime** · 09/03/2011, 20h12

MeaCulpa,

Code :

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

1
2
3
4
var qtes=document.getElementsByName('qte[]');
for(var i; i< qtes.length; i++){
   Qte    = parseInt( qtes[i].value);
    Prix   = parseFloat( document.getElementsByName('pu[]')[i].value);

C'est la faute du copier/coller, pas moi

.