Javascript, additionner les valeurs de champs

Fermé
Bert74 - 19 nov. 2008 à 18:46
 Medenor - 4 avril 2010 à 10:22
Bonjour,
Dans un formulaire, je souhaiterai mettre en place ce système d'aide à la saisie en temps réel :
J'ai 3 champs ouverts qui seront remplis avec des valeurs numériques, à la suite de ces champs, j'ai un quatrième champ qui sera la somme des 3 premiers.
Je cherche donc que le contenu du quatrième champ affiche la somme des 3 premiers en instantanément.
Je pense aussi qu'il faut mettre en place une vérification pour contrôler la présence uniquement de caractères numériques dans les 3 premiers champs.

Merci pour votre aide

1 réponse

Marco la baraque Messages postés 996 Date d'inscription vendredi 9 mai 2008 Statut Contributeur Dernière intervention 5 novembre 2009 328
20 nov. 2008 à 00:38
Bonsoir,
J'ai fait ça avec des int, regarde si ça te va. Sinon tu peux utiliser des parseFloat ou parseDouble si tu veux.
<html>
<head>
	<title>Test CCM</title>
	<script type="text/javascript">
	function computeResult() {
		var result = document.getElementById('result');
		
		var value1 = document.getElementById('field1').value;
		var value2 = document.getElementById('field2').value;
		var value3 = document.getElementById('field3').value;
		
		if (testInt(value1) && testInt(value2) && testInt(value3)) {
			result.value = parseInt(value1) + parseInt(value2) + parseInt(value3);
		}
		else {
			alert('The value is not an integer');
		}
	}
	
	function testInt(value) {
		return value == parseInt(value);
	}
	</script>
</head>
<body>
<input type="text" id="field1" onChange="computeResult();" value="0"></input>
<input type="text" id="field2" onChange="computeResult();" value="0"></input>
<input type="text" id="field3" onChange="computeResult();" value="0"></input>
<br/>

<span> Result : </span><input type="text" id="result" value="0"></input>

</body>
</html>


Avoir un code totalement dynamique (le résultat qui se met à jour durant la saisie) est impossible. En fait ça dépend de comment ton navigateur interprète l'évènement onChange. En général (notamment sur ie et firefox), l'évènement est levé quand tu n'as plus le focus sur ton champs (quand tu cliques en dehors ou que tu tapes Entrée).


Cordialement,
1
Merci beaucoup, je cherchais justement un code pareil :D
0