Affichage automatique d'addition

**theo63** · 27/01/2012, 14h46

Bonjour à tous, je galère avec cet ébauche de formulaire et je n'arrive pas à trouver la solution. Je travaille sur un formulaire ou on entre une quantité et un prix qui multiplie et donne un somme et qu'il additionne automatiquement verticalement pour obtenir le total.
J'obtient un résultat au total en utilisant les champs 1 et 2, quand je fait le calcul automatique horizontal des champs 3 et 4 j'ai la somme qui s'inscrit mais l'addition verticale ne se fait pas.
Si je commence par les champs 3 et 4 et ensuite les champs 1 et 2 ça fonctionne.
Je ne sait pas si je suis clair mais je joint le script.
Merci d'avance pour votre aide.

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
 
<html> 
<body> 
<form method="post" id="formulaire"> 
<script language="JavaScript" type="text/javascript"> 
<!-- 
function sum_elements(){ 
var somme=0; 
var result = document.getElementById('somme'); 
for(var i = 1; i<=4; i++){ 
var element = document.getElementById('chps'+i); 
if(element.value!='' && !isNaN(element.value)){ 
somme += parseFloat(element.value); 
} 
} 
result.value = somme; 
} 
//--> 
</script> 
<table summary="" border="0"> 
<tr> 
<td></td> 
</tr> 
<tr> 
<td width="400" align="left"><u>Formulaire 1</u></td> 
<td width="160"></td> 
<td width="90"></td> 
</tr> 
<tr> 
<td width="400" align="right">Champs 1 -></td> 
<td width="160">nombre X prix U =</td> 
<td width="90" align="center"><input id="chps1" name="chps1" type="text" onkeyup="sum_elements();" size="8" size="8" value=""></td> 
</tr> 
<tr> 
<td width="400" align="right">Champs 2 -></td> 
<td width="160">nombre X prix U =</td> 
<td width="90" align="center"><input id="chps2" name="chps2" type="text" onkeyup="sum_elements();" size="8" size="8" value=""></td> 
</tr> 
</tr> 
<script language="JavaScript" type="text/javascript"> 
<!-- 
function calculchps3() 
{ 
var chps3= document.getElementById("formulaire").elements["nbre3"].value * document.getElementById("formulaire").elements["prix3"].value; 
document.getElementById("formulaire").elements["chps3"].value=chps3; 
} 
//--> 
</script> 
<tr> 
<td width="390" align="right">Champs 3 -> 
longueur <input name="nbre3" type="text" size="4" onblur="calculchps3()" value=""> 
X </td> 
<td align="right">prix du m =<input name="prix3" type="text" size="4" onblur="calculchps3()" value=""> = </td> 
<td width="90" align="center"> 
<input id="chps3" name="chps3" type="text" size="8" size="8" value=""></td> 
 
</tr> 
</tr> 
<script language="JavaScript" type="text/javascript"> 
<!-- 
function calculchps4() 
{ 
var chps4= document.getElementById("formulaire").elements["nbre4"].value * document.getElementById("formulaire").elements["prix4"].value; 
document.getElementById("formulaire").elements["chps4"].value=chps4; 
} 
//--> 
</script> 
<tr> 
<td width="390" align="right">Champs 4 -> 
longueur <input name="nbre4" type="text" size="4" onblur="calculchps4()" value=""> 
X </td> 
<td align="right">prix du m =<input name="prix4" type="text" size="4" onblur="calculchps4()" value=""> = </td> 
<td width="90" align="center"> 
<input id="chps4" name="chps4" type="text" size="8" size="8" value=""></td> 
 
</tr> 
<tr> 
<td width="400" align="right" height="40" valign="bottom"></td> 
<td width="160" align="center" height="40" valign="bottom"><b>Total </b></td> 
<td width="90" align="right" height="40" valign="bottom"><input id="somme" name="somme" type="text" size="8" value=""></td> 
</tr> 
 
</table> 
 
</form> 
</body> 
</html>

**SPACHFR** · 27/01/2012, 17h55

Bonjour,

Une solution simple

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function calculchps3() 
{ 
var chps3= document.getElementById("formulaire").elements["nbre3"].value * document.getElementById("formulaire").elements["prix3"].value; 
document.getElementById("formulaire").elements["chps3"].value=chps3;
sum_elements();
} 
function calculchps4() 
{ 
var chps4= document.getElementById("formulaire").elements["nbre4"].value * document.getElementById("formulaire").elements["prix4"].value; 
document.getElementById("formulaire").elements["chps4"].value=chps4; 
sum_elements()
}

Cependant, je te conseil vivement de réorganiser ton code et de vérifier tes balises HTML (voir de te documenter un peu plus).
Tu aurais pu placer ton JS dans des balises '<head>' par exemple.

**theo63** · 27/01/2012, 19h22

Merci pour la réponse, tout semble si simple quand vous nous donnez la solution.
J'ai sortis JS des balises '<head>' pour avoir une présentation un peu plus explicite.
Encore merci.
Par contre j'ai des formulaires ou je dois répéter "function calculchps" une vingtaine de fois: est-ce qu'il y a une solution pour simplifier les écritures?

Théo

**NoSmoking** · 28/01/2012, 12h06

Envoyé par theo63

Par contre j'ai des formulaires ou je dois répéter "function calculchps" une vingtaine de fois: est-ce qu'il y a une solution pour simplifier les écritures?

il te faut factoriser, cela signifie que attendu que l'on peut passer des paramètres à une fonction il FAUT les utiliser, les paramètres, pour avoir une seule et même fonction.

Dans tes fonctions j'ai mis en bleu ce qui change et en gras ce qui pourrait être passé en paramètre.

Code :

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

1
2
3
4
5
6
7
8
9
10
function calculchps3(){ 
  var resultat= document.getElementById("formulaire").elements["nbre3"].value * document.getElementById("formulaire").elements["prix3"].value; 
  document.getElementById("formulaire").elements["chps3"].value=resultat;
  sum_elements();
} 
function calculchps4() { 
  var resultat= document.getElementById("formulaire").elements["nbre4"].value * document.getElementById("formulaire").elements["prix4"].value; 
  document.getElementById("formulaire").elements["chps4"].value=resultat; 
  sum_elements();
}

**theo63** · 28/01/2012, 15h24

Bonjour et merci pour la réponse.
J'ai ecris un script comme ci-dessous et je suis allé voir les arguments de fonction sur "php.net". Mais je n'arrive pas à comprendre.
Est-ce que tu peut me donner une piste parce-que là je sèche.
Merci d'avance.

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
 
<script language="JavaScript" type="text/javascript">
	<!--
	function calculchps() { 
  var resultat= document.getElementById("formulaire").elements["nbre"].value * document.getElementById("formulaire").elements["prix"].value; 
  document.getElementById("formulaire").elements["chps"].value=resultat; 
  sum_elements();
	}
	//-->
	</script>
 
<tr>
		<td width="390" align="right">Champs 4 ->
		longueur <input name="nbre4" type="text" size="4" onblur="calculchps()" value="">
		X </td>
		<td align="right">prix du m =<input name="prix4" type="text" size="4" onblur="calculchps()" value=""> = </td>
		<td width="90" align="center">
		<input id="chps4" name="chps4" type="text" size="8" size="8" value=""></td>
 
</tr>

**NoSmoking** · 28/01/2012, 15h58

J'ai ecris un script comme ci-dessous et je suis allé voir les arguments de fonction sur "php.net".

pourquoi pas en javascript plutôt ?

http://javascript.developpez.com/tut...avascript/#LIX

Est-ce que tu peut me donner une piste parce-que là je sèche.

tu l'as sous les yeux en gras, c'est l'indice.

Cela pourrait donner

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function calculchps( indice){
/*
  var resultat= document.getElementById("formulaire").elements["nbre3"].value * document.getElementById("formulaire").elements["prix3"].value;
  document.getElementById("formulaire").elements["chps3"].value=resultat;
  sum_elements();
*/
  var oForm = document.getElementById("formulaire");
  var oNbre = oForm.elements['nbre' +indice];
  var oPrix = oForm.elements['prix' +indice];
  var oChps = oForm.elements['chps' +indice];
  oChps.value = oNbre.value * oPrix.value;
  sum_elements();
}

avec un appel comme suit

Code html :

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

1
2
3
4
5
<form id="formulaire">
<input name="nbre4" type="text" size="4" onblur="calculchps(4)" value="">
<input name="prix4" type="text" size="4" onblur="calculchps(4)" value="">
<input name="chps4" type="text" size="8" size="8" value="">
</form>

**theo63** · 28/01/2012, 18h47

J'étais loin d'écrire quelque chose qui ressemble à ça.
Je vais travaillé les arguments de fonction qui me semble bien pratique.
Un grand merci

Affichage automatique d'addition

JavaScript

Discussions similaires

Partager

Partager