# Calculateur par checkbox

## Recommended Posts

Bonjour à touts et toutes.

Je suis une vraie débutante et je n'arrive pas à résoudre un problème qui doit être tout simple. J'aimerai faire fonctionner un calculateur qui additionne et soustrait en activant ou désactivant des checkbox

Ci-dessous, mon script. Il fonctionne bien avec des espaces de texte, mais pas avec les checkbox...?

Merci pour votre aide.

Charline

###########

<script language="JavaScript" type="text/javascript">

<!--

/* This script is Copyright (c) Paul McFedries and

Logophilia Limited (http://www.mcfedries.com/).

Permission is granted to use this script as long as

this Copyright notice remains in place.*/

function CalculateTotal(frm) {

var order_total = 0

// Run through all the form fields

for (var i=0; i < frm.elements.length; ++i) {

// Get the current field

form_field = frm.elements[i]

// Get the field's name

form_name = form_field.name

// Is it a "product" field?

if (form_name.substring(0,4) == "PROD") {

// If so, extract the price from the name

item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1))

// Get the quantity

item_quantity = parseInt(form_field.value)

// Update the order total

if (item_quantity >= 0) {

order_total += item_quantity * item_price

}

}

}

// Display the total rounded to two decimal places

document.getElementById("order_total").firstChild.data = "CHF" + round_decimals(order_total, 2)

}

function round_decimals(original_number, decimals) {

var result1 = original_number * Math.pow(10, decimals)

var result2 = Math.round(result1)

var result3 = result2 / Math.pow(10, decimals)

}

// Convert the number to a string

var value_string = rounded_value.toString()

// Locate the decimal point

var decimal_location = value_string.indexOf(".")

// Is there a decimal point?

if (decimal_location == -1) {

// If no, then all decimal places will be padded with 0s

decimal_part_length = 0

// If decimal_places is greater than zero, tack on a decimal point

value_string += decimal_places > 0 ? "." : ""

}

else {

// If yes, then only the extra decimal places will be padded with 0s

decimal_part_length = value_string.length - decimal_location - 1

}

// Calculate the number of decimal places that need to be padded with 0s

var pad_total = decimal_places - decimal_part_length

// Pad the string with 0s

for (var counter = 1; counter <= pad_total; counter++)

value_string += "0"

}

return value_string

}

function totalcheckbox() {

document.checkbox.TOTAL.value = ''; //I set the value of all the checkboxes equal to nothing

var total = 0;

//For loop iterates through all the checkboxes. ++ adds one each time to i.

for (i=0;i<document.checkbox.select.length;i++) {

if (document.checkbox.select[i].checked) {

total = total + parseInt(document.checkbox.select[i].value); //take whatever they selected and make it into an integer

}

}

document.checkbox.TOTAL.value = total; //total value box equal to the sum

}

//-->

</script><script language="JavaScript" type="text/javascript">

<!--

/* This script is Copyright (c) Paul McFedries and

Logophilia Limited (http://www.mcfedries.com/).

Permission is granted to use this script as long as

this Copyright notice remains in place.*/

function CalculateTotal(frm) {

var order_total = 0

// Run through all the form fields

for (var i=0; i < frm.elements.length; ++i) {

// Get the current field

form_field = frm.elements[i]

// Get the field's name

form_name = form_field.name

// Is it a "product" field?

if (form_name.substring(0,4) == "PROD") {

// If so, extract the price from the name

item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1))

// Get the quantity

item_quantity = parseInt(form_field.value)

// Update the order total

if (item_quantity >= 0) {

order_total += item_quantity * item_price

}

}

}

// Display the total rounded to two decimal places

document.getElementById("order_total").firstChild.data = "CHF" + round_decimals(order_total, 2)

}

function round_decimals(original_number, decimals) {

var result1 = original_number * Math.pow(10, decimals)

var result2 = Math.round(result1)

var result3 = result2 / Math.pow(10, decimals)

}

// Convert the number to a string

var value_string = rounded_value.toString()

// Locate the decimal point

var decimal_location = value_string.indexOf(".")

// Is there a decimal point?

if (decimal_location == -1) {

// If no, then all decimal places will be padded with 0s

decimal_part_length = 0

// If decimal_places is greater than zero, tack on a decimal point

value_string += decimal_places > 0 ? "." : ""

}

else {

// If yes, then only the extra decimal places will be padded with 0s

decimal_part_length = value_string.length - decimal_location - 1

}

// Calculate the number of decimal places that need to be padded with 0s

var pad_total = decimal_places - decimal_part_length

// Pad the string with 0s

for (var counter = 1; counter <= pad_total; counter++)

value_string += "0"

}

return value_string

}

function totalcheckbox() {

document.checkbox.TOTAL.value = ''; //I set the value of all the checkboxes equal to nothing

var total = 0;

//For loop iterates through all the checkboxes. ++ adds one each time to i.

for (i=0;i<document.checkbox.select.length;i++) {

if (document.checkbox.select[i].checked) {

total = total + parseInt(document.checkbox.select[i].value); //take whatever they selected and make it into an integer

}

}

document.checkbox.TOTAL.value = total; //total value box equal to the sum

}

//-->

</script>

<form action="" class="freemailform" method="post">

<p><span style="font-size:smaller;">Veuillez vous assurer de fournir une adresse email valide, afin que nous puissions vous répondre dans les meilleures conditions.</span></p>

<table align="left" height="526" width="63%">

<tbody>

<tr>

<td class="left" height="22" style="display:none" valign="middle" width="216"><span>subject:</span></td>

<td height="22" width="0"><input class="input text" name="subject" size="30" style="display:none" type="text" value="Demande offre" /></td>

</tr>

<tr>

<td class="left" height="35" valign="middle" width="216"> </td>

<td height="35"> </td>

</tr>

<tr>

<td bgcolor="#c0c0c0" class="left" width="216"><b>Quantité</b></td>

<td bgcolor="#c0c0c0"><b>Désignation</b></td>

<td bgcolor="#c0c0c0" style="text-align: right;"><b>Prix par pièces</b></td>

</tr>

<tr>

<td align="left" height="30" valign="middle" width="216"><input name="PROD_1_1" onselect="CalculateTotal(this.form)" type="checkbox" value="10.00" /></td>

<td height="30" valign="middle">Choice 1</td>

<td align="RIGHT" height="30" valign="middle">10.00</td>

</tr>

<tr>

<td align="left" height="30" valign="middle" width="216"><input name="PROD_2_1" onselect="CalculateTotal(this.form)" type="checkbox" value="20.00" /></td>

<td height="30" valign="middle">Choice 2</td>

<td align="RIGHT" height="30" valign="middle">20.00</td>

</tr>

<tr>

<td height="36" valign="middle" width="216"> </td>

<td height="36" valign="middle">

<p align="right"><b>TOTAL</b></p>

</td>

<td height="36" valign="middle">

<p align="right"><span id="order_total" style="text-align: right; font-weight: 700;">CHF 0.00</span></p>

</td>

</tr>

<tr>

<td class="left" height="22" valign="middle" width="216"><span>Nom:</span></td>

<td height="22"><input class="input text" name="Nom" size="35" type="text" /></td>

</tr>

<tr>

<td class="left" height="22" valign="middle" width="216">Prénom:</td>

<td height="22"><input class="input text" name="Prenom" size="35" type="text" /></td>

</tr>

<tr>

<td class="left" height="22" valign="middle" width="216"><span>Adresse email:</span></td>

<td height="22"><input class="input text" name="email" size="35" type="text" value="" /></td>

</tr>

<tr>

<td class="left" height="22" valign="middle" width="216">Date d'arrivée<span style="font-size:smaller;">:   (jj/mm/aaaa</span>)</td>

<td height="22"><font color="#000000" face="Verdana" size="3"><select name="Date_Arrivee_jour" size="1"><option value="0">0</option><option value="1">1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select><select name="Date_Arrivee_mois" size="1"><option selected="selected">0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option></select><select name="Date_Arrivee_Annee" size="1"><option selected="selected" value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option></select></font></td>

</tr>

<tr>

<td class="left" height="22" valign="middle" width="216">Nombre de personnes:</td>

<td height="22"><font color="#000000" face="Verdana" size="3"><select name="Nombre_personnes" size="1"><option selected="selected">0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option></select></font></td>

</tr>

<tr>

<td class="left" height="64" valign="middle" width="216"><span>Informations supplémentaires:  </span></td>

<td height="64">

<p><textarea cols="20" name="message" rows="5" style="width: 310px; height: 64px;"></textarea></p>

</td>

</tr>

<tr>

<td class="left" height="19" width="216"> </td>

</tr>

<tr>

<td class="left" height="26" width="216"> </td>

<td height="26"><input name="fmf_nonce" type="hidden" value="[NONCE]" /><input name="cmd" type="hidden" value="send_fmf" /><span><input class="submit" name="aaa" type="submit" value="Envoyer le message" /></span></td>

</tr>

</tbody>

</table>

<p> </p>

<input name="verified" type="hidden" value="b9958a5d82" /> <input name="verified" type="hidden" value="b9958a5d82" /> </form>

##### Share on other sites

Bonjour Charline,

Je vois que la source de ton script a été dupliquée... du moins les premières fonctions.

La mise en page un peu brouillonne et non formatée ne donne pas vraiment envie de se plonger dans ce code. En voici une version nettoyée et formatée pour ceux qui se sentent le courage de s'y plonger.

Au premier coup d'oeil, il manque des "value=..." à la liste des <option> ....

```<script language="JavaScript" type="text/javascript">
<!--

/* This script is Copyright (c) Paul McFedries and
Logophilia Limited (http://www.mcfedries.com/).
Permission is granted to use this script as long as
this Copyright notice remains in place.*/

function CalculateTotal(frm) {
var order_total = 0

// Run through all the form fields
for (var i = 0; i < frm.elements.length; ++i) {

// Get the current field
form_field = frm.elements[i]

// Get the field's name
form_name = form_field.name

// Is it a "product" field?
if (form_name.substring(0, 4) == "PROD") {

// If so, extract the price from the name
item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1))

// Get the quantity
item_quantity = parseInt(form_field.value)

// Update the order total
if (item_quantity >= 0) {
order_total += item_quantity * item_price
}
}
}

// Display the total rounded to two decimal places
document.getElementById("order_total").firstChild.data = "CHF" + round_decimals(order_total, 2)
}

function round_decimals(original_number, decimals) {
var result1 = original_number * Math.pow(10, decimals)
var result2 = Math.round(result1)
var result3 = result2 / Math.pow(10, decimals)
}

// Convert the number to a string
var value_string = rounded_value.toString()

// Locate the decimal point
var decimal_location = value_string.indexOf(".")

// Is there a decimal point?
if (decimal_location == -1) {
// If no, then all decimal places will be padded with 0s
decimal_part_length = 0

// If decimal_places is greater than zero, tack on a decimal point
value_string += decimal_places > 0 ? "." : ""
} else {

// If yes, then only the extra decimal places will be padded with 0s
decimal_part_length = value_string.length - decimal_location - 1
}

// Calculate the number of decimal places that need to be padded with 0s
var pad_total = decimal_places - decimal_part_length

// Pad the string with 0s
for (var counter = 1; counter <= pad_total; counter++)
value_string += "0"
}
return value_string
}

function totalcheckbox() {
document.checkbox.TOTAL.value = ''; //I set the value of all the checkboxes equal to nothing
var total = 0;
//For loop iterates through all the checkboxes. ++ adds one each time to i.
for (i = 0; i < document.checkbox.select.length; i++) {
if (document.checkbox.select[i].checked) {
total = total + parseInt(document.checkbox.select[i].value); //take whatever they selected and make it into an integer
}
}

document.checkbox.TOTAL.value = total; //total value box equal to the sum
}
//-->
</script>

<form action="" class="freemailform" method="post">
<p><span style="font-size:smaller;">Veuillez vous assurer de fournir une adresse email valide, afin que nous puissions vous répondre dans les meilleures conditions.</span>
</p>
<table align="left" height="526" width="63%">
<tbody>
<tr>
<td class="left" height="22" style="display:none" valign="middle" width="216"><span>subject:</span>
</td>
<td height="22" width="0">
<input class="input text" name="subject" size="30" style="display:none" type="text" value="Demande offre" />
</td>
</tr>
<tr>
<td class="left" height="35" valign="middle" width="216"> </td>
<td height="35"> </td>
</tr>
<tr>
<td bgcolor="#c0c0c0" class="left" width="216"><b>Quantité</b>
</td>
<td bgcolor="#c0c0c0"><b>Désignation</b>
</td>
<td bgcolor="#c0c0c0" style="text-align: right;"><b>Prix par pièces</b>
</td>
</tr>
<tr>
<td align="left" height="30" valign="middle" width="216">
<input name="PROD_1_1" onselect="CalculateTotal(this.form)" type="checkbox" value="10.00" />
</td>
<td height="30" valign="middle">Choice 1</td>
<td align="RIGHT" height="30" valign="middle">10.00</td>
</tr>
<tr>
<td align="left" height="30" valign="middle" width="216">
<input name="PROD_2_1" onselect="CalculateTotal(this.form)" type="checkbox" value="20.00" />
</td>
<td height="30" valign="middle">Choice 2</td>
<td align="RIGHT" height="30" valign="middle">20.00</td>
</tr>
<tr>
<td height="36" valign="middle" width="216"> </td>
<td height="36" valign="middle">
<p align="right"><b>TOTAL</b>
</p>
</td>
<td height="36" valign="middle">
<p align="right"><span id="order_total" style="text-align: right; font-weight: 700;">CHF 0.00</span>
</p>
</td>
</tr>
<tr>
<td class="left" height="22" valign="middle" width="216"><span>Nom:</span>
</td>
<td height="22">
<input class="input text" name="Nom" size="35" type="text" />
</td>
</tr>
<tr>
<td class="left" height="22" valign="middle" width="216">Prénom:</td>
<td height="22">
<input class="input text" name="Prenom" size="35" type="text" />
</td>
</tr>
<tr>
<td class="left" height="22" valign="middle" width="216"><span>Adresse email:</span>
</td>
<td height="22">
<input class="input text" name="email" size="35" type="text" value="" />
</td>
</tr>
<tr>
<td class="left" height="22" valign="middle" width="216">Date d'arrivée<span style="font-size:smaller;">:   (jj/mm/aaaa</span>)</td>
<td height="22"><font color="#000000" face="Verdana" size="3">
<select name="Date_Arrivee_jour" size="1">
<option value="0">0</option>
<option value="1">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option><
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="Date_Arrivee_mois" size="1">
<option selected="selected">0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select name="Date_Arrivee_Annee" size="1">
<option selected="selected" value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
</font>
</td>
</tr>
<tr>
<td class="left" height="22" valign="middle" width="216">Nombre de personnes:</td>
<td height="22">
<font color="#000000" face="Verdana" size="3">
<select name="Nombre_personnes" size="1">
<option selected="selected">0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</font>
</td>
</tr>
<tr>
<td class="left" height="64" valign="middle" width="216"><span>Informations supplémentaires:  </span>
</td>
<td height="64">
<p>
<textarea cols="20" name="message" rows="5" style="width: 310px; height: 64px;"></textarea>
</p>
</td>
</tr>
<tr>
<td class="left" height="19" width="216"> </td>
</tr>
<tr>
<td class="left" height="26" width="216"> </td>
<td height="26">
<input name="fmf_nonce" type="hidden" value="[NONCE]" />
<input name="cmd" type="hidden" value="send_fmf" /><span><input class="submit" name="aaa" type="submit" value="Envoyer le message" /></span>
</td>
</tr>
</tbody>
</table>
<p> </p>
<input name="verified" type="hidden" value="b9958a5d82" />
</form>```

## Create an account

Register a new account

• ### Similar Content

• #### Modifier un script de dédicace

By fredxhaflaire,

• 0 replies
• 1927 views
• #### Agregateur offre emploi

By rogertafo,

• 0 replies
• 2269 views