Mise à jour dynamique d'un champs

Version imprimable

09/10/2006, 17h26
Badiste

Mise à jour dynamique d'un champs

Bonjour,

Je développe une application ASP/javascript qui nécessite une mise à jour dynamique du champs total au fur et à mesure que l'on remplit un tableau !
Le tableau étant rempli d'autant de zones de saisie qu'il y a de jours dans un mois.
je voudrai donc qu'à chaque fois que je change une valeur dans une zone de saisie, le total soit mis à jour.
Les zones de saisie sont nommées par la valeur du jour !
Merci
09/10/2006, 23h41
Kerod

Tu peux fonctionner avec les id et faire appel à l'évènement onchange. Mais il est vrai que du code en complément serait le bienvenue ;)

Hello

essaie ça :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
<head>
	<title>Test Addition</title>
	<script type="text/javascript">
		function additionne(valeur){
			var total = document.getElementById("total");
			total.innerHTML = parseInt(total.innerHTML) + parseInt(valeur);
		}
 
		onload = function(){
			var objs = document.getElementById("saisies").getElementsByTagName("input");
			for(var i=objs.length; i>0;)
				objs[--i].onchange = function(){ additionne(this.value); };
		}
	</script>
</head>
 
<body>
 
<table id="saisies">
	<tr>
		<td><input type="text" value="0"/></td>
	</tr>
	<tr>
		<td><input type="text" value="0"/></td>
	</tr>
	<tr>
		<td><input type="text" value="0"/></td>
	</tr>
	<tr>
		<td><input type="text" value="0"/></td>
	</tr>
	<tr>
		<td><input type="text" value="0"/></td>
	</tr>
	<tr>
		<td><input type="text" value="0"/></td>
	</tr>
	<tr>
		<td><input type="text" value="0"/></td>
	</tr>
</table>
Total : <span id="total">0</span>
</body>
</html>

10/10/2006, 10h32
Badiste

Merci lalouve,

Le test fonctionne bien seulement, le total ne fait que grimper !!
Si je change la valeur d'un champs, le total ne s'ajuste pas, il augmente ??
Une idée ??
Merci
10/10/2006, 12h29
Kerod
Il faut refaire le calcul et non l'ajouter à la valeur déjà présente dans l'input

Donc par exemple refaire le code là et mettre ceci dans la définition de la fonciton
Code:

1 2 3 4 function additionne(valeur){ var total = document.getElementById("total"); total.innerHTML = parseInt(valeur); }
10/10/2006, 13h14
Badiste

Mise à jour dynamique d'un champs

Merci Kerod,

J'ai bien noté la différence sauf que le total doit faire la somme des 7 champs en permanence et là ce n'est pas le cas !
Le chiffre indiqué dans le total est le même que celui qui vient d'être saisi !
Il faut qu'il puisse y avoir un recalcul de tous les champs lorsque l'un d'entre eux est modifiés.

Mise à jour dynamique d'un champs

En faisant une synthèse des codes, j'ai réussi à faire fonctionner mon programme, merci à vous.

Voici le code :

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
 
<html>
<head>
	<title>Test Addition</title>
	<script type="text/javascript">
      function Calcul(valeur){
		var tot=0.0;
		var chp=0.0;
		var obj = document.getElementById("saisies").getElementsByTagName("input");
		for(var i = 0; i < obj.length; ++i)
		{tot=tot+parseInt(obj[i].value);}
		total.innerHTML = (tot);}
	</script>
</head>
 
<body>
 
<table id="saisies">
	<tr>
		<td><input type="text" value="0" onchange="Calcul(this);"></td>
	</tr>
	<tr>
		<td><input type="text" value="0" onchange="Calcul(this);"></td>
	</tr>
	<tr>
		<td><input type="text" value="0" onchange="Calcul(this);"></td>
	</tr>
	<tr>
		<td><input type="text" value="0" onchange="Calcul(this);"></td>
	</tr>
	<tr>
		<td><input type="text" value="0" onchange="Calcul(this);"></td>
	</tr>
	<tr>
		<td><input type="text" value="0" onchange="Calcul(this);"></td>
	</tr>
	<tr>
		<td><input type="text" value="0" onchange="Calcul(this);"></td>
	</tr>
</table>
Total : <span id="total">0</span>
</body>
</html>