Calcul total = prix * quantité

**kof_eve** · 07/09/2011, 12h38

Bonjour tlm.

Donc voila, je vous expose ce qui se passe.

J'ai une page avec des zones de texte généré avec du php, spécialement la quantité, et le prix unitaire.
Genre:

produit 1 : "qte_1" "prix_1"
produit 2 : "qte_2" "prix_2"
produit 3 : "qte_3" "prix_3"

A la fin de cette page j'ai une autre zone de texte qui normalement affiche le total général du prix.

Pour le script JavaScript, j'utilise celui d'en dessous sur l’événement Onchange, c'est assez basique:

Code :

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

1
2
3
4
5
6
7
8
9
10
function add(){
var a=0;
var b=0;
 
	for (i=1;i<=300;i++){
		a = Math.round(document.getElementById('qte1_'+i).value) * Math.round(document.getElementById('prixu_'+i).value);
		b = b+a;
	}
	document.getElementById('total').value=b;
}

Le hic dans l'histoire c'est que ça ne marche pas >_< ..
Si vous avez une idée ^^. merci d'avance.
Cordialement

**NoSmoking** · 07/09/2011, 13h01

Bonjour,
- document.getElementById('qte1_'+i).value retourne une string
- Math.round attend un numérique en paramètre
il te faut donc convertir les string en numeric via un parseInt ou un parseFloat

Code :

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

a = Math.round( parseFloat(document.getElementById('qte1_'+i).value))

**kof_eve** · 07/09/2011, 13h21

Avant tout merci pour réponse

C'est vrai pour Math.round

mais ca ne vient pas d'elle mon erreur. La preuve que quand j'essaye sans la boucle, genre :

Code :

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

a = Math.round(document.getElementById('qte1_1').value) * Math.round(document.getElementById('prixu_1').value);

Ma zone de texte total, m'affiche bien le résultat attendu. >_<

**SpaceFrog** · 07/09/2011, 13h23

Code :

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

1
2
3
4
5
for (i=1;i<=300;i++){
		a = +document.getElementById('qte1_'+i).value * document.getElementById('prixu_'+i).value;
		b = b+a;
	}
	document.getElementById('total').value=b;

**kof_eve** · 07/09/2011, 13h31

SpaceFrog .. je ne vois pas trop le changement dans ton scripte a part le + au début ^^'
Mais non, c'est toujours le même problème, aucune résultat dans la zone de texte général

Merci en tout cas de votre aide

**SpaceFrog** · 07/09/2011, 13h33

c'est que le html associé n'est pas correct ?

Code :

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

b+=a

que te retourne un alert( b ) ???

**kof_eve** · 07/09/2011, 13h44

Si si .. mais quand j'avais un doute. j'ai passé au mode super basique au cas ou ^^'

Donc avec vos changements, le script ressemble a a ça :

Code :

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

1
2
3
4
5
6
7
8
9
function add(){
var a=0;
var b=0;
	for (i=1;i<=300;i++){
		a = +document.getElementById('qte1_'+i).value * document.getElementById('prixu_'+i).value;
		b+=a
	}
	document.getElementById('total').value=b;
}

Mais toujours rien

par contre encore, quand j’enlève la boucle et je met un id d'une des zones de texte. j'ai le résultat affiché

**SpaceFrog** · 07/09/2011, 13h48

on peut voir le html de "total" ?

**kof_eve** · 07/09/2011, 13h57

Code total

Code :

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

<input id="total" name="total" type="text" value="" style="width:324px;border:#143d5c solid 1px;text-align:center;font-weight:bold" readonly />

Code prix et quantité

Code :

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

1
2
<input style="width:98px;text-align:center" id="qte1_'.$num.'" name="qte1_'.$num.'" type="text" value="0" onkeypress="validate(event)" onchange="add()" />
<input style="width:98px;text-align:center" id="prixu_'.$num.'" name="prixu_'.$num.'" type="text" value="0" onkeypress="validate(event)" onchange="add()" />

C'est du php, mais c'est claire. la variable num me sert a identifier les zones de texte (type numérique).

La function validate au cas ou.

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
function validate(event) {
if(!event&&window.event) {
event=window.event;
}
// IE
if((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 37 || event.keyCode > 40) && event.keyCode != 16 && event.which != 46 && event.keyCode != 46 && event.keyCode != 8 && event.keyCode != 9 ) {
event.returnValue = false;
event.cancelBubble = true;
}
// DOM
if((event.which < 48 || event.which > 57) && (event.keyCode < 37 || event.keyCode > 40) && event.keyCode != 16 && event.which != 46 && event.keyCode != 46 && event.keyCode != 8 && event.keyCode != 9 ) {
event.preventDefault();
event.stopPropagation();
}
}

C'est une fonction qui m'aide a interdire des caractères dans le clavier.

**SpaceFrog** · 07/09/2011, 13h59

onchange => l'input doit perdre le focus ...

**kof_eve** · 07/09/2011, 14h05

Oui, oui, c'est ce que je fais.
J'ai déjà dis que tout va bien et je reçois mon résultat si j’enlève la boucle for:

Code :

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

1
2
3
4
5
6
7
function add(){
var a=0;
var b=0;
	a = +document.getElementById('qte1_1').value * document.getElementById('prixu_1').value;
	b+=a
	document.getElementById('total').value=b;
}

**SpaceFrog** · 07/09/2011, 14h12

regarde ton code html généré , tes id ne doivent pas correspondre ...

**kof_eve** · 07/09/2011, 14h25

je ne cois pas, j'ai vu et revu pas mal de fois ^^'
Mais comme on dit. On ne sait jamais.

J'ai du copier d'un tout petit peut, vu que ce n'est pas possible de tout poster içi

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
Choisissez un Emplacement a ajouter : <input class="textara_editeur" style="width:50px;" name="index1" type="text" value="" /> <select name="em1" id="em1" class="textara_editeur"  style="width:608px" onchange="calc(document.getElementById('em1').value,1);" > <option value="0">&nbsp;&nbsp;ETUDES ET INSTALLATION&nbsp;&nbsp;&nbsp;==> (Non)</option>
 <option value="1" >&nbsp;&nbsp;&nbsp;&nbsp;ETUDES ET INSTALLATION&nbsp;&nbsp;&nbsp;==> (Oui)</option>
</select><br />
<span id="ar1" style="visibility:hidden;display:none">
 
<table border="0" style="border:0;text-align:center;color:#d04a01;font-size:12px;"><tr><td style="width:40px;">Index</td><td style="width:550px;">Article</td><td style="width:58px;">Unité</td><td style="width:100px;">Q.Marché</td><td style="width:120px;">Prix U</td></tr></table>
<input type="text" value="" name="index_1" style="width:38px;text-align:center;" /><input type="hidden" value="1" name="idarticle_1" /><input type="hidden" value="1" name="idemp_1" /><input style="width:558px;" id="article_1" type="text" value="&nbsp;&nbsp;&nbsp;Etudes et établissement des plans d`exécution" readonly /><input style="width:58px;text-align:center" name="unite_1" type="text" value="Ft" readonly /><input style="width:98px;text-align:center" id="qte1_1" name="qte1_1" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_1" name="prixu_1" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_1" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 <input type="text" value="" name="index_2" style="width:38px;text-align:center;" /><input type="hidden" value="2" name="idarticle_2" /><input type="hidden" value="1" name="idemp_2" /><input style="width:558px;" id="article_2" type="text" value="&nbsp;&nbsp;&nbsp;Installation de chantier" readonly /><input style="width:58px;text-align:center" name="unite_2" type="text" value="Ft" readonly /><input style="width:98px;text-align:center" id="qte1_2" name="qte1_2" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_2" name="prixu_2" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_2" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 <input type="text" value="" name="index_3" style="width:38px;text-align:center;" /><input type="hidden" value="3" name="idarticle_3" /><input type="hidden" value="1" name="idemp_3" /><input style="width:558px;" id="article_3" type="text" value="&nbsp;&nbsp;&nbsp;Repliement de chantier" readonly /><input style="width:58px;text-align:center" name="unite_3" type="text" value="Ft" readonly /><input style="width:98px;text-align:center" id="qte1_3" name="qte1_3" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_3" name="prixu_3" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_3" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 <input type="text" value="" name="index_4" style="width:38px;text-align:center;" /><input type="hidden" value="4" name="idarticle_4" /><input type="hidden" value="1" name="idemp_4" /><input style="width:558px;" id="article_4" type="text" value="&nbsp;&nbsp;&nbsp;Police d`assurance pour les bâches d`aspiration" readonly /><input style="width:58px;text-align:center" name="unite_4" type="text" value="Ft" readonly /><input style="width:98px;text-align:center" id="qte1_4" name="qte1_4" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_4" name="prixu_4" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_4" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 
 <input type="text" value="" name="index_5" style="width:38px;text-align:center;" /><input type="hidden" value="5" name="idarticle_5" /><input type="hidden" value="1" name="idemp_5" /><input style="width:558px;" id="article_5" type="text" value="&nbsp;&nbsp;&nbsp;Plans de recollement" readonly /><input style="width:58px;text-align:center" name="unite_5" type="text" value="Ft" readonly /><input style="width:98px;text-align:center" id="qte1_5" name="qte1_5" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_5" name="prixu_5" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_5" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 <input id="ar101" style="width:558px;border:0;text-align:center;color:#d04a01;font-weight:bold" name="article" type="text" value="" />
<br /></span>
 
Choisissez un Emplacement a ajouter : <input class="textara_editeur" style="width:50px;" name="index2" type="text" value="" /> <select name="em2" id="em2" class="textara_editeur" style="width:608px" onchange="calc(document.getElementById('em2').value,2);" > <option value="0">&nbsp;&nbsp;TERRASSELENTS&nbsp;&nbsp;&nbsp;==> (Non)</option>
 <option value="2">&nbsp;&nbsp;&nbsp;&nbsp;TERRASSELENTS&nbsp;&nbsp;&nbsp;==> (Oui)</option>
 
</select><br />
<span id="ar2" style="visibility:hidden;display:none">
<table border="0" style="border:0;text-align:center;color:#d04a01;font-size:12px;"><tr><td style="width:40px;">Index</td><td style="width:550px;">Article</td><td style="width:58px;">Unité</td><td style="width:100px;">Q.Marché</td><td style="width:120px;">Prix U</td></tr></table>
<input type="text" value="" name="index_6" style="width:38px;text-align:center;" /><input type="hidden" value="6" name="idarticle_6" /><input type="hidden" value="2" name="idemp_6" /><input style="width:558px;" id="article_6" type="text" value="&nbsp;&nbsp;&nbsp;Déblais en pleine masse" readonly /><input style="width:58px;text-align:center" name="unite_6" type="text" value="m3" readonly /><input style="width:98px;text-align:center" id="qte1_6" name="qte1_6" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_6" name="prixu_6" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_6" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 <input type="text" value="" name="index_7" style="width:38px;text-align:center;" /><input type="hidden" value="7" name="idarticle_7" /><input type="hidden" value="2" name="idemp_7" /><input style="width:558px;" id="article_7" type="text" value="&nbsp;&nbsp;&nbsp;Déblais pour tranchées" readonly /><input style="width:58px;text-align:center" name="unite_7" type="text" value="m3" readonly /><input style="width:98px;text-align:center" id="qte1_7" name="qte1_7" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_7" name="prixu_7" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_7" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 <input type="text" value="" name="index_8" style="width:38px;text-align:center;" /><input type="hidden" value="8" name="idarticle_8" /><input type="hidden" value="2" name="idemp_8" /><input style="width:558px;" id="article_8" type="text" value="&nbsp;&nbsp;&nbsp;Remblais compacté autour des ouvrages" readonly /><input style="width:58px;text-align:center" name="unite_8" type="text" value="m3" readonly /><input style="width:98px;text-align:center" id="qte1_8" name="qte1_8" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_8" name="prixu_8" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_8" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 <input id="ar102" style="width:558px;border:0;text-align:center;color:#d04a01;font-weight:bold" name="article" type="text" value="" />
 
<br /></span>
 
Choisissez un Emplacement a ajouter : <input class="textara_editeur" style="width:50px;" name="index3" type="text" value="" /> <select name="em3" id="em3" class="textara_editeur"  style="width:608px" onchange="calc(document.getElementById('em3').value,3);" > <option value="0">&nbsp;&nbsp;BETON COFFRE - ACIER - MAÇONNERIE&nbsp;&nbsp;&nbsp;==> (Non)</option>
 <option value="3">&nbsp;&nbsp;&nbsp;&nbsp;BETON COFFRE - ACIER - MAÇONNERIE&nbsp;&nbsp;&nbsp;==> (Oui)</option>
</select><br />
<span id="ar3" style="visibility:hidden;display:none">
<table border="0" style="border:0;text-align:center;color:#d04a01;font-size:12px;"><tr><td style="width:40px;">Index</td><td style="width:550px;">Article</td><td style="width:58px;">Unité</td><td style="width:100px;">Q.Marché</td><td style="width:120px;">Prix U</td></tr></table>
 
<input type="text" value="" name="index_9" style="width:38px;text-align:center;" /><input type="hidden" value="9" name="idarticle_9" /><input type="hidden" value="3" name="idemp_9" /><input style="width:558px;" id="article_9" type="text" value="&nbsp;&nbsp;&nbsp;Béton de propreté classe B5" readonly /><input style="width:58px;text-align:center" name="unite_9" type="text" value="m2" readonly /><input style="width:98px;text-align:center" id="qte1_9" name="qte1_9" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_9" name="prixu_9" type="text" value="0"  onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_9" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 <input type="text" value="" name="index_10" style="width:38px;text-align:center;" /><input type="hidden" value="10" name="idarticle_10" /><input type="hidden" value="3" name="idemp_10" /><input style="width:558px;" id="article_10" type="text" value="&nbsp;&nbsp;&nbsp;Béton pour béton armé de classe B2 hydrofugé, Radier, Semelle" readonly /><input style="width:58px;text-align:center" name="unite_10" type="text" value="m3" readonly /><input style="width:98px;text-align:center" id="qte1_10" name="qte1_10" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_10" name="prixu_10" type="text" value="0"  onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_10" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 <input type="text" value="" name="index_11" style="width:38px;text-align:center;" /><input type="hidden" value="11" name="idarticle_11" /><input type="hidden" value="3" name="idemp_11" /><input style="width:558px;" id="article_11" type="text" value="&nbsp;&nbsp;&nbsp;Béton pour béton armé de classe B2 hydrofugé, Paroi verticale, Poteaux, Poutres" readonly /><input style="width:58px;text-align:center" name="unite_11" type="text" value="m3" readonly /><input style="width:98px;text-align:center" id="qte1_11" name="qte1_11" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_11" name="prixu_11" type="text" value="0"  onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_11" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 <input type="text" value="" name="index_12" style="width:38px;text-align:center;" /><input type="hidden" value="12" name="idarticle_12" /><input type="hidden" value="3" name="idemp_12" /><input style="width:558px;" id="article_12" type="text" value="&nbsp;&nbsp;&nbsp;Béton pour béton armé de classe B2 hydrofugé pour la paroi verticale de la cuve" readonly /><input style="width:58px;text-align:center" name="unite_12" type="text" value="m3" readonly /><input style="width:98px;text-align:center" id="qte1_12" name="qte1_12" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_12" name="prixu_12" type="text" value="0"  onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_12" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 <input type="text" value="" name="index_13" style="width:38px;text-align:center;" /><input type="hidden" value="13" name="idarticle_13" /><input type="hidden" value="3" name="idemp_13" /><input style="width:558px;" id="article_13" type="text" value="&nbsp;&nbsp;&nbsp;Béton pour béton armé de classe B2 pour la dalle, acrotères" readonly /><input style="width:58px;text-align:center" name="unite_13" type="text" value="m3" readonly /><input style="width:98px;text-align:center" id="qte1_13" name="qte1_13" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_13" name="prixu_13" type="text" value="0"  onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_13" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 <input type="text" value="" name="index_14" style="width:38px;text-align:center;" /><input type="hidden" value="14" name="idarticle_14" /><input type="hidden" value="3" name="idemp_14" /><input style="width:558px;" id="article_14" type="text" value="&nbsp;&nbsp;&nbsp;Béton pour béton armé de classe B2 pour la dalle inférieure de la cuve" readonly /><input style="width:58px;text-align:center" name="unite_14" type="text" value="m3" readonly /><input style="width:98px;text-align:center" id="qte1_14" name="qte1_14" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_14" name="prixu_14" type="text" value="0"  onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_14" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 
 <input type="text" value="" name="index_15" style="width:38px;text-align:center;" /><input type="hidden" value="15" name="idarticle_15" /><input type="hidden" value="3" name="idemp_15" /><input style="width:558px;" id="article_15" type="text" value="&nbsp;&nbsp;&nbsp;Béton pour béton armé de classe B2 pour ouvrages annexes" readonly /><input style="width:58px;text-align:center" name="unite_15" type="text" value="m3" readonly /><input style="width:98px;text-align:center" id="qte1_15" name="qte1_15" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_15" name="prixu_15" type="text" value="0"  onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_15" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 <input type="text" value="" name="index_16" style="width:38px;text-align:center;" /><input type="hidden" value="16" name="idarticle_16" /><input type="hidden" value="3" name="idemp_16" /><input style="width:558px;" id="article_16" type="text" value="&nbsp;&nbsp;&nbsp;Gros béton" readonly /><input style="width:58px;text-align:center" name="unite_16" type="text" value="m3" readonly /><input style="width:98px;text-align:center" id="qte1_16" name="qte1_16" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_16" name="prixu_16" type="text" value="0"  onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_16" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 <input type="text" value="" name="index_17" style="width:38px;text-align:center;" /><input type="hidden" value="17" name="idarticle_17" /><input type="hidden" value="3" name="idemp_17" /><input style="width:558px;" id="article_17" type="text" value="&nbsp;&nbsp;&nbsp;Coffrage ordinaire pour fondation et élévation" readonly /><input style="width:58px;text-align:center" name="unite_17" type="text" value="m2" readonly /><input style="width:98px;text-align:center" id="qte1_17" name="qte1_17" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_17" name="prixu_17" type="text" value="0"  onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_17" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 <input type="text" value="" name="index_18" style="width:38px;text-align:center;" /><input type="hidden" value="18" name="idarticle_18" /><input type="hidden" value="3" name="idemp_18" /><input style="width:558px;" id="article_18" type="text" value="&nbsp;&nbsp;&nbsp;Coffrage soigné pour parements apparents" readonly /><input style="width:58px;text-align:center" name="unite_18" type="text" value="m2" readonly /><input style="width:98px;text-align:center" id="qte1_18" name="qte1_18" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_18" name="prixu_18" type="text" value="0"  onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_18" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 <input type="text" value="" name="index_19" style="width:38px;text-align:center;" /><input type="hidden" value="19" name="idarticle_19" /><input type="hidden" value="3" name="idemp_19" /><input style="width:558px;" id="article_19" type="text" value="&nbsp;&nbsp;&nbsp;Acier Tor pour béton armé" readonly /><input style="width:58px;text-align:center" name="unite_19" type="text" value="Kg" readonly /><input style="width:98px;text-align:center" id="qte1_19" name="qte1_19" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_19" name="prixu_19" type="text" value="0"  onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_19" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 <input type="text" value="" name="index_20" style="width:38px;text-align:center;" /><input type="hidden" value="20" name="idarticle_20" /><input type="hidden" value="3" name="idemp_20" /><input style="width:558px;" id="article_20" type="text" value="&nbsp;&nbsp;&nbsp;Fourniture et mise en œuvre de tou-venant de concassage" readonly /><input style="width:58px;text-align:center" name="unite_20" type="text" value="m2" readonly /><input style="width:98px;text-align:center" id="qte1_20" name="qte1_20" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_20" name="prixu_20" type="text" value="0"  onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_20" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 
 <input type="text" value="" name="index_21" style="width:38px;text-align:center;" /><input type="hidden" value="21" name="idarticle_21" /><input type="hidden" value="3" name="idemp_21" /><input style="width:558px;" id="article_21" type="text" value="&nbsp;&nbsp;&nbsp;Fourniture, transport et mise en place d`hérrissonage de 0,20m" readonly /><input style="width:58px;text-align:center" name="unite_21" type="text" value="m2" readonly /><input style="width:98px;text-align:center" id="qte1_21" name="qte1_21" type="text" value="0" onkeypress="validate(event)" onchange="add()" /><input style="width:98px;text-align:center" id="prixu_21" name="prixu_21" type="text" value="0"  onkeypress="validate(event)" onchange="add()" /><br /><textarea name="description_21" cols="40" rows="4" class="textara_editeur" style="width:868px;height:30px;background-color:#FFFFFF"></textarea><br />
 <input id="ar103" style="width:558px;border:0;text-align:center;color:#d04a01;font-weight:bold" name="article" type="text" value="" />
<br /></span>

Merci

**SpaceFrog** · 07/09/2011, 14h31

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
function add(){
var a=0;
var b=0;
liste=""
	for (i=1;i<=300;i++){
		a = +document.getElementById('qte1_'+i).value * document.getElementById('prixu_'+i).value;
		b+=a
  liste+=i+" => qte : "+document.getElementById('qte1_'+i).value+" _  prix : " +document.getElementById('prixu_'+i).value +"<br/>";
	}
 
var res=document.createElement('div')
res.innerHTML=liste
document.boddy.appendChild(res)
	document.getElementById('total').value=b;
}

là il te fait quoi ?

**kof_eve** · 07/09/2011, 14h39

Rien

**SpaceFrog** · 07/09/2011, 14h41

change le nom de ta fonction add ..

**SpaceFrog** · 07/09/2011, 14h52

enlève le display:none ?

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
 
<script type="text/javascript">
function myadd(){
var a=0;
var b=0;
	for (i=1;i<=4;i++){
		a = +document.getElementById('qte1_'+i).value * document.getElementById('prixu_'+i).value;
		b+=a
	}
 
	document.getElementById('total').value=b;
}
</script>
</head>
 
<body>
<input style="width:98px;text-align:center" id="qte1_1" name="qte1_" type="text" value="0"  onchange="myadd()" />
<input style="width:98px;text-align:center" id="prixu_1" name="prixu_" type="text" value="1"  onchange="myadd()" />
 
<input style="width:98px;text-align:center" id="qte1_2" name="qte1_" type="text" value="0"  onchange="myadd()" />
<input style="width:98px;text-align:center" id="prixu_2" name="prixu_" type="text" value="2"  onchange="myadd()" />
 
<input style="width:98px;text-align:center" id="qte1_3" name="qte1_" type="text" value="0"  onchange="myadd()" />
<input style="width:98px;text-align:center" id="prixu_3" name="prixu_" type="text" value="3"  onchange="myadd()" />
 
<input style="width:98px;text-align:center" id="qte1_4" name="qte1_" type="text" value="0"  onchange="myadd()" />
<input style="width:98px;text-align:center" id="prixu_4" name="prixu_" type="text" value="4"  onchange="myadd()" />
 
 
<input style="width:98px;text-align:center" id="total" type="text"  />
 
 
</body>
 
</html>

ceci fonctionne

**NoSmoking** · 07/09/2011, 15h05

Code :

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

for (i=1;i<=300;i++){

le 300 sort d'où ??

**kof_eve** · 07/09/2011, 17h49

le 300 c'était le total de la variable num qui nous totalise le nombre de zone de text

**NoSmoking** · 07/09/2011, 18h33

Envoyé par kof_eve

le 300 c'était le total de la variable num qui nous totalise le nombre de zone de text

le c'était m'inquiéte

essaies ce code si tu n'est pas sûr que 300 correspond à la borne de fin

Code :

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

1
2
3
4
5
  var i, oQte, oPrix;
  for( i = 1;  ( oQte = document.getElementById('qte1_' +i)) && ( oPrix = document.getElementById('prixu_' +i)); i++){
    a  = oQte.value * oPrix.value;
    b +=a
  }

ici on teste l'existence des 2 éléments avant d'y avoir accès.

Calcul total = prix * quantité

JavaScript

Discussions similaires

Partager

Partager