Calcul automatique pour formulaire HTML [Fermé]

Signaler
-
 MonsieurUntel -
Bonjour,

Voilà, j'aimerais mettre un formulaire (Bon de commandes) sur mon site. J'ai déjà créer le formulaire en soi sur base de se que j'ai lu sur des forums. Il y a 10 colonnes où l'on doit inscrire la référence, puis le prix. En dessous, le prix total est calculé automatiquement.

J'ai essayé 1 méthode proposé, mais apparemment je n'ai pas bien compris, car cela ne fonctionne pas. Je vous mets ci-dessous ce que j'ai obtenu. Pouvez-vous trouver l'erreur ?

Merci

--------------------------------

<html>
<head>
<title>calcul</title>
<script language="javascript">
function calcul()

{
document.calcul.result.value=eval(document.calcul.Prix0.value+"document.calcul.Prix1.value"+"document.calcul.Prix2.value"+"document.calcul.Prix3.value"+"document.calcul.Prix4.value"+"document.calcul.Prix5.value"+"document.calcul.Prix6.value"+"document.calcul.Prix7.value"+"document.calcul.Prix8.value"+"document.calcul.Prix9.value")

}

</script>
</head>

<form name="calcul">

References des Livres :<p><input type="text" name="Référence0"/>* Prix : <input type="text" name="Prix0" value=0 />Euro* <br />
<input type="text" name="Référence" /> Prix : <input type="text" name="Prix1" value=0 />Euro <br />
<input type="text" name="Référence" /> Prix : <input type="text" name="Prix2" value=0 />Euro <br />
<input type="text" name="Référence" /> Prix : <input type="text" name="Prix3" value=0 />Euro <br />
<input type="text" name="Référence" /> Prix : <input type="text" name="Prix4" value=0 />Euro <br />
<input type="text" name="Référence" /> Prix : <input type="text" name="Prix5" value=0 />Euro <br />
<input type="text" name="Référence" /> Prix : <input type="text" name="Prix6" value=0 />Euro <br />
<input type="text" name="Référence" /> Prix : <input type="text" name="Prix7" value=0 />Euro <br />
<input type="text" name="Référence" /> Prix : <input type="text" name="Prix8" value=0 />Euro <br />
<input type="text" name="Référence" /> Prix : <input type="text" name="Prix9" value=0 />Euro <br />

Prix Total : <input type="text" name="result"/ disabled="disabled">Euro <br />

<input type="button" value="Calcul Prix Total" onclick="calcul();">

* Obligatoire

</form>
</html>

2 réponses

Bon, personne ne m'a aider, mais voici ce que j'ai fait pour finir et ça marche :

<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;
var value4 = document.getElementById('field4').value;
var value5 = document.getElementById('field5').value;
var value6 = document.getElementById('field6').value;
var value7 = document.getElementById('field7').value;
var value8 = document.getElementById('field8').value;
var value9 = document.getElementById('field9').value;
var value10 = document.getElementById('field10').value;

if (testInt(value1) && testInt(value2) && testInt(value3) && testInt(value4) && testInt(value5) && testInt(value6) && testInt(value7) && testInt(value8) && testInt(value9) && testInt(value10)) {
result.value = parseInt(value1) + parseInt(value2) + parseInt(value3) + parseInt(value4) + parseInt(value5) + parseInt(value6) + parseInt(value7) + parseInt(value8) + parseInt(value9) + parseInt(value10);
}
else {
alert('Les valeurs introduites ne sont pas des nombres');
}
}

function testInt(value) {
return value == parseInt(value);
}
</script>
</head>
<body>
<input type="text" name="Référence" /> Prix : <input type="text" id="field1" onChange="computeResult();" value="0"></input>Euro <br />
<input type="text" name="Référence" /> Prix : <input type="text" id="field2" onChange="computeResult();" value="0"></input>Euro <br />
<input type="text" name="Référence" /> Prix : <input type="text" id="field3" onChange="computeResult();" value="0"></input>Euro <br />
<input type="text" name="Référence" /> Prix : <input type="text" id="field4" onChange="computeResult();" value="0"></input>Euro <br />
<input type="text" name="Référence" /> Prix : <input type="text" id="field5" onChange="computeResult();" value="0"></input>Euro <br />
<input type="text" name="Référence" /> Prix : <input type="text" id="field6" onChange="computeResult();" value="0"></input>Euro <br />
<input type="text" name="Référence" /> Prix : <input type="text" id="field7" onChange="computeResult();" value="0"></input>Euro <br />
<input type="text" name="Référence" /> Prix : <input type="text" id="field8" onChange="computeResult();" value="0"></input>Euro <br />
<input type="text" name="Référence" /> Prix : <input type="text" id="field9" onChange="computeResult();" value="0"></input>Euro <br />
<input type="text" name="Référence" /> Prix : <input type="text" id="field10" onChange="computeResult();" value="0"></input>Euro <br />

<span> Prix Total : </span><input type="text" id="result" value="0" disabled="disabled"></input>

</body>
</html>
4
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60511 internautes nous ont dit merci ce mois-ci

Super ce que tu as fait
Un seul petit défaut pour que e soit vraiment nickel, c'est que l'alerte "Les valeurs introduites ne sont pas des nombres" ne s'affiche pas si on laisse un champ vide. Je veux dire sans "0"
Merci tout de même ! car c'est déjà pas mal !