Discussion :

[Roromix]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[Kerod]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Roromix]

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

Merci autrement, ca fonctionne

[Seb19]

Pour le nombre de décimal, tu peux utiliser toFixed() sur le total :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById('total').value=(nb1+nb2+nb3+nb4+nb5).toFixed(2);

[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