Aller au contenu

Calculateur par checkbox


charline

Sujets conseillés

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.

icon_redface.gif

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>

Lien vers le commentaire
Partager sur d’autres 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)
        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>

 

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...