Javascript - devis dynamique - fonction de calcul
Bonjour,
Je débute en javascript et c'est ma première intervention sur un forum.
J'ai un script qui effectue le calcul des options sélectionnées.
Dans le cas des boutons radio, le montant du bouton précédemment sélectionné est retranché pour afficher le nouveau montant et cela fonctionne très bien avec un seul groupe de bouton radio.
Le problème c'est que quand il y a plusieurs groupes de boutons radio, les montants sont annulé d'un groupe à l'autre alors qu'il faudrait ajouter les uns aux autres les montants sélectionnés de chacun des groupes de boutons radio.
Avez-vous une idée ? Merci.
Script en démonstration : http://devintersed.free.fr/index.php
Script complet :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Devis</title>
<script type="text/javascript">
// Calculate the total for items in the form which are selected.
function calculateTotal(inputItem)
{
with (inputItem.form)
{
// Process each of the different input types in the form.
if (inputItem.type == "radio")
{ // Process radio buttons.
// Subtract the previously selected radio button value from the total.
calculatedTotal.value = eval(calculatedTotal.value) - eval(previouslySelectedRadioButton.value);
// Save the current radio selection value.
previouslySelectedRadioButton.value = eval(inputItem.value);
// Add the current radio button selection value to the total.
calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
}
else
{ // Process check boxes.
if (inputItem.checked == false)
{ // Item was uncheck. Subtract item value from total.
calculatedTotal.value = eval(calculatedTotal.value) - eval(inputItem.value);
}
else
{ // Item was checked. Add the item value to the total.
calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
}
}
// Total value should never be less than 0.
if (calculatedTotal.value < 0) {
InitForm();
}
// Return total value.
return(formatCurrency(calculatedTotal.value));
}
}
// Format a value as currency.
function formatCurrency(num) {
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num))
num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3)) + ',' + num.substring(num.length-(4*i+3));
return (((sign)?'':'-') + '€' + num + '.' + cents);
}
// This function initialzes all the form elements to default values.
function InitForm() {
// Reset values on form.
document.selectionForm.total.value='€0';
document.selectionForm.calculatedTotal.value=0;
document.selectionForm.previouslySelectedRadioButton.value=0;
// Set all checkboxes and radio buttons on form to unchecked.
for (i=0; i < document.selectionForm.elements.length; i++) {
if (document.selectionForm.elements[i].type == 'checkbox' | document.selectionForm.elements[i].type == 'radio') {
document.selectionForm.elements[i].checked = false;
}
}
}
</script>
</head>
<body onload="InitForm();" onreset="InitForm();">
<div>
<table><tr><td>
<form method="POST" name="selectionForm">
<b>Pizza</b><br>
Petite €10.00
<input type="checkbox" name="Steak" value="10.00" onclick="this.form.total.value=calculateTotal(this);">
Normal €12.00
<input type="checkbox" name="Chicken" value="12.00" onclick="this.form.total.value=calculateTotal(this);">
Large €15.00
<input type="checkbox" name="Sushi" value="15.00" onclick="this.form.total.value=calculateTotal(this);">
<br><br>
</td></tr></table></div>
<div><table><tr><td>
<b>Supplément :</b> <br>
<input type="radio" name="Sauce" value="0.00" onclick="this.form.total.value=calculateTotal(this);"> Rien
<br>
<input type="radio" name="Sauce" value="1.00" onclick="this.form.total.value=calculateTotal(this);"> + de fromage €1.00
<br>
<input type="radio" name="Sauce" value="2.00" onclick="this.form.total.value=calculateTotal(this);"> végétarien €2.00
<br>
<input type="radio" name="Sauce" value="3.00" onclick="this.form.total.value=calculateTotal(this);"> jambon €3.00
<br>
<br>
<br>
<b>Services :</b> <br>
<input type="radio" name="service" value="5.00" onclick="this.form.total.value=calculateTotal(this);"> Livraison
<br>
<input type="radio" name="service" value="2.00" onclick="this.form.total.value=calculateTotal(this);"> Sur place
<br>
<input type="radio" name="service" value="10.00" onclick="this.form.total.value=calculateTotal(this);"> Traiteur
<br>
<br>
<input type="hidden" name="calculatedTotal" value="0">
<input type="hidden" name="previouslySelectedRadioButton" value="0">
<strong>Your total is:</strong>
<input type="text" name="total" readonly onfocus="this.blur();">
</form>
</td></tr></table></div>
</body>
</html> |
