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 - les boîtes de dialogue VoirQu'est-ce qu'une boîte de dialogue? Une boîte de dialogue est une fenêtre qui s'affiche au premier plan suite à un événement, et qui permet Soit d'avertir l'utilisateur Soit le confronter à un choix Soit lui demander de compléter un champ pour...
Le protocole TCP VoirLes caractéristiques du protocole TCP TCP (qui signifie Transmission Control Protocol, soit en français: Protocole de Contrôle de Transmission) est un des principaux protocoles de la couche transport du modèle TCP/IP. Il permet, au niveau des...

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