charline Posté 14 Mars 2016 Posté 14 Mars 2016 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) return pad_with_zeros(result3, decimals) } function pad_with_zeros(rounded_value, decimal_places) { // 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 if (pad_total > 0) { // 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) return pad_with_zeros(result3, decimals) } function pad_with_zeros(rounded_value, decimal_places) { // 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 if (pad_total > 0) { // 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> <td height="19">[CAPTCHA]</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>
Dan Posté 15 Mars 2016 Posté 15 Mars 2016 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) return pad_with_zeros(result3, decimals) } function pad_with_zeros(rounded_value, decimal_places) { // 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 if (pad_total > 0) { // 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> <td height="19">[CAPTCHA]</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>
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant