Mise à jour dynamique d'un champs

**Badiste** · 09/10/2006, 17h26

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

**Kerod** · 09/10/2006, 23h41

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

**lalouve** · 10/10/2006, 02h56

Hello

essaie ça :

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
 
<!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>

++

**Badiste** · 10/10/2006, 10h32

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

**Kerod** · 10/10/2006, 12h29

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 :

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

1
2
3
4
function additionne(valeur){
			var total = document.getElementById("total");
			total.innerHTML = parseInt(valeur);
		}

**Badiste** · 10/10/2006, 13h14

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.

**Badiste** · 10/10/2006, 15h18

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

Voici le code :

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
 
<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>

Mise à jour dynamique d'un champs

JavaScript

Discussions similaires

Partager

Partager