Calculer un prix

Version imprimable

Calculer un prix

Bonjour,

Je suis en train de créé un site de personnalisation de produit mit à la vente en ligne. Toute la partie de personnalisation fonctionne mais quand les prix dans les champs avec un "+" devant changent, mon total ne change pas. En fait je débute en javascript et je ne sais pas comment faire.

Voila une petite ébauche :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script language="Javascript"> function total() { total.value=Nombre(ini.value.+.c.value.+.l.value.+.e.value.+.i.value); return true; } </script> <b>Prix initial : <input type="text" size="5" name="ini" value="360,00" readonly>€<br> +<input type="text" size="5" name="c" value="00,00" onchange="total();">€<br> +<input type="text" size="5" name="l" value="00,00" onchange="total();">€<br> +<input type="text" size="5" name="e" value="00,00" onchange="total();">€<br> +<input type="text" size="5" name="i" value="00,00" onchange="total();">€<br> Total : <input type="text" size="5" name="total" value="360,00" readonly>€</b>
Aidez-moi s'il vous plait !

Alors première chose : Ne jamais nommer un champ avec le même nom qu'une fonction, il y a conflit.

Ensuite toujours mettre les balises form quand on a à faire avec un formulaire.

Alors voici une version qui fonctionne

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script language="Javascript">
function calcul() {
var nb1 = parseFloat(document.getElementById('ini').value);
var nb2 = parseFloat(document.getElementById('c').value);
var nb3 = parseFloat(document.getElementById('l').value);
var nb4 = parseFloat(document.getElementById('e').value);
var nb5 = parseFloat(document.getElementById('i').value);
document.getElementById('total').value=nb1+nb2+nb3+nb4+nb5;
 
}
</script>
<form name="formulaire">
<b>Prix initial : <input type="text" size="5" id="ini" name="ini" value="360.00" readonly>€<br>
+<input type="text" size="5" id="c" name="c" value="00.00" onchange="calcul()">€<br>
+<input type="text" size="5" id="l" name="l" value="00.00" onchange="calcul()">€<br>
+<input type="text" size="5" id="e" name="e" value="00.00" onchange="calcul()">€<br>
+<input type="text" size="5" id="i" name="i" value="00.00" onchange="calcul()">€<br>
Total : <input type="text" size="5" id="total" name="total" value="360.00" readonly>€</b></form>

Attention aussi à la virgule qui est en javascript et tous autres langages caractérisé par le .
Pour les nombres float toujours les parser avant un calcul car ils sont considérés comme des chaines dans un input

une deuxième version qui fonctionne :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script language="Javascript">
function total2() {
formu.total.value=parseFloat(formu.ini.value)+parseFloat(formu.c.value)+parseFloat(formu.l.value)+parseFloat(formu.e.value)+parseFloat(formu.i.value);
         return true;
}
</script>
<form name="formu">
<b>Prix initial : <input type="text" size="5" name="ini" value="360.00" readonly>€<br>
+<input type="text" size="5" name="c" value="00.00" onchange="total2();">€<br>
+<input type="text" size="5" name="l" value="00.00" onchange="total2();">€<br>
+<input type="text" size="5" name="e" value="00.00" onchange="total2();">€<br>
+<input type="text" size="5" name="i" value="00.00" onchange="total2();">€<br>
Total : <input type="text" size="5" name="total" value="360.00" readonly>€</b></form>

18/09/2006, 07h23
Roromix

et si je veux deux chiffres aprés la virgule ?

Merci autrement, ca fonctionne
18/09/2006, 09h34
Seb19
Pour le nombre de décimal, tu peux utiliser toFixed() sur le total :
Code:

1 2 document.getElementById('total').value=(nb1+nb2+nb3+nb4+nb5).toFixed(2);
18/09/2006, 09h40
SpaceFrog

se méfier toutefois des arrondis sauvages de javascript ...
Il y a un petit truc là dessus dans la faq javascript ...

sinon une recherche