Rechercher : dans
Par :

Javascript, additionner les valeurs de champs

Dernière réponse le 20 nov 2008 à 00:38:14 Bert74, le 19 nov 2008 à 18:46:03 
 Signaler ce message aux modérateurs

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

Configuration: Windows XP
Firefox 3.0.4

Meilleures réponses pour « Javascript, additionner les valeurs de champs » dans :
Javascript - Effacer un champ de formulaire lors du clic (focus) VoirIl vous est sûrement arrivé de tomber sur un formulaire HTML avec des valeurs pré-remplies décrivant par exemple le type de valeur attendue. L'intention est louable mais il est désagréable de devoir sélectionner ce texte et le supprimer avant de...
Javascript - Manipulation des contrôles clavier VoirManipulation des contrôles clavier Cette astuce a pour but de vous faire découvrir la (ou du moins une) manière de contrôler les évènements clavier en javascript. Cela vous permettra de contrôler/attribuer les/des comportements particuliers à...
Javascript - Les événements VoirQu'appelle-t-on un événement? Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est...
Javascript - Les tableaux VoirIntroduction à la notion de tableau Les variables de Javascript ne permettent de stocker qu'une seule donnée à la fois. Or, étant donné qu'il est souvent utile de manipuler de nombreuses données, le concept de variable se révéle parfois...

1

 Marco la baraque, le 20 nov 2008 à 00:38:14
  • +2

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, rtfm and jfgi

Répondre à Marco la baraque
Collection CommentÇaMarche.net