Affichage automatique d'addition
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:
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> |
