11564 sujets

JavaScript, DOM et API Web HTML5

Afficher dans un champ le résultat d'un calcul sans le submit

Bonjour Smiley smile

Je souhaiterais afficher le résultat des calculs directement dans l'INPUT id="total" après avoir renseigné les champs requis (INPUT id="kilo-patate" et INPUT id="kilo-tomate") :

<form id="form1" name="form1" method="post" action="">
	<p>Pommes de terre : 5 EUR/kg</p>
	<label for="kilo-patate">Nombre de kilos</label>
	<input type="text" name="kilo-patate" id="kilo-patate" />
	
	<p>Tomates : 4 EUR/kg</p>
	<label for="kilo-tomate">Nombre de kilos</label>
	<input type="text" name="kilo-tomate" id="kilo-tomate" />
	<br />
	<label for="total">Prix total pommes de terre + tomates</label>
	<input type="text" name="total" id="total" />
	
	<input name="envoyer" type="button" value="Envoyer" />
</form>


Comme je peux procéder ?

Merci pour votre aide Smiley smile
Bonsoir ThVi,

je te laisse faire pour améliorer la présentation de ta page HTML.
Voici une solution :
<!doctype html>
<html>
<head>
<title>calcul</title>
</head>

<body>
<form method="post" action="">

	<fieldset>
		<legend>Pommes de Terre</legend>
		<label>Quantit&eacute;</label>
		<input type="text" size="10" onblur="document.getElementById('tot1').value = 5 * this.value;" />
		<label>Prix au kilo : 5 euros</label>
	</fieldset>

	<fieldset>
		<legend>Tomates</legend>
		<label>Quantit&eacute;</label>
		<input type="text" size="10"  onblur="document.getElementById('tot2').value = 4 * this.value;" />
		<label>Prix au kilo : 4 euros</label>
	</fieldset>

	<fieldset>
		<legend>Prix total en euros et en kilos</legend>
		<label>Pommes de terre :</label>
		<input type="text" disabled id="tot1" size="5" />
		<label>Tomates :</label>
		<input type="text" disabled id="tot2" size="5" />
	</fieldset>

	<br />
	<input type="submit" value="Envoyer" />
	<input type="reset"  value="Remise &agrave; z&eacute;ro" />
</form>
</body>
</html>


@+
Sujet clos
Aller à