dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: checkbox value form help!

  1. #1
    Join Date
    Sep 2008
    Posts
    12

    checkbox value form help!

    Hello,
    I have been at this forever and cannot find any solution
    I have 5 checkboxes, the first 3 each have a value of 260, check 2 or more and the total is maxed out at 390. So far so good.
    The problem is the 2 other checkboxes. They each have a value of 130. If checked, their values need to be added to the total no matter what. In other words these 2 checkboxes need to be exempt from the max 390 rule.
    I just can't get this to work.
    thanks for any help you can give

    code:


    <script type="text/javascript">
    if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (needle) {
    for (var i = 0; i < this.length; i++) {
    if (this[i] === needle) return i;
    }
    return -1;
    };
    }
    // Run our code when the window is finished loading
    window.onload = function () {
    // Reference to our form element, and other things
    var form = document.forms["form1"], total = checked = 0,
    exempt = ["checkbox_group_4[]", "checkbox_group_5[]"];
    // Bind up our calculate method when our form changes
    if (form.addEventListener) {
    form.addEventListener("change", calculate, false);
    } else if (form.attachEvent) {
    form.attachEvent("onchange", calculate);
    } else {
    form.onchange = calculate;
    }
    // Define our Calculate function
    function calculate () {
    // Reset total and checked
    total = 0, checked = 0;
    // Cycle over each item in our form
    for (var i = 0; i < form.length; i++) {
    // Handle only those that are checked
    if (form[i].checked) {
    // Add their value to the total value
    total += parseInt(form[i].value, 10);
    // If they aren't extempt from flatrate
    if (exempt.indexOf(form[i].name) < 0) {
    // Increment the number of eligible items
    checked += 1;

    }


    }
    }
    // If more than one eligible item is checked
    if (checked > 1) {
    total = 390;

    // Else if only one eligible item is checked
    }
    else if (checked > 0) {
    total += 0;
    }


    // Show the user the estimated value
    form["total"].value = total;
    }

    };
    </script>



    Form:

    <form id="contactForm" name="form1" action="send-mail.php" method="POST"><fieldset>

    <input type="checkbox" name="checkbox_group_1[]" onclick="calculate()" value="260" class=" " title="Cochez ici" />
    <label>Mardi 19h 21h30</label> <br/>

    <input type="checkbox" name="checkbox_group_2[]" onclick="calculate()" value="260" class=" " title="Cochez ici" />
    <label>Vendredi 19h 21h30</label>

    <input type="checkbox" name="checkbox_group_3[]" onclick="calculate()" value="260" class=" " title="Cochez ici" />
    <label>Vendredi 19h 21h30</label>



    <input type="checkbox" name="checkbox_group_4[]" onclick="calculate()" value="260" class=" " title="Cochez ici" />
    <label>Mardi 19h 21h30</label> <br/>

    <input type="checkbox" name="checkbox_group_5[]" onclick="calculate()" value="260" class=" " title="Cochez ici" />
    <label>Vendredi 19h 21h30</label>

    <input type="text" size="2" name="total" value="0"/>

    </fieldset>
    </form>

  2. #2
    Join Date
    Aug 2013
    Posts
    6
    See my changes in red color.
    I use a variable named end in calculate function. if any of last two or both checkboxes are checked it will count that number and where you assigning total. There is loop to add 130 upto that number of times. Hope it will help. thnks




    code:


    <script type="text/javascript">

    // Define our Calculate function
    function calculate () {
    // Reset total and checked
    total = 0, checked = 0, end=0; //define end variable
    // Cycle over each item in our form
    for (var i = 0; i < form.length; i++) {
    // Handle only those that are checked
    if (form[i].checked) {
    // Add their value to the total value
    total += parseInt(form[i].value, 10);
    // If they aren't extempt from flatrate
    if (exempt.indexOf(form[i].name) < 0) {
    // Increment the number of eligible items
    checked += 1;

    }
    else
    {
    end +=1;
    }


    }
    }
    // If more than one eligible item is checked
    if (checked > 1) {
    total = 390;
    for(var i=0; i< end; i++)
    {
    total +=130;
    }


    // Else if only one eligible item is checked
    }
    else if (checked > 0) {
    total += 0;
    }


    // Show the user the estimated value
    form["total"].value = total;
    }

    };
    </script>



    Form:

    <form id="contactForm" name="form1" action="send-mail.php" method="POST"><fieldset>

    <input type="checkbox" name="checkbox_group_1[]" onclick="calculate()" value="260" class=" " title="Cochez ici" />
    <label>Mardi 19h 21h30</label> <br/>

    <input type="checkbox" name="checkbox_group_2[]" onclick="calculate()" value="260" class=" " title="Cochez ici" />
    <label>Vendredi 19h 21h30</label>

    <input type="checkbox" name="checkbox_group_3[]" onclick="calculate()" value="260" class=" " title="Cochez ici" />
    <label>Vendredi 19h 21h30</label>



    <input type="checkbox" name="checkbox_group_4[]" onclick="calculate()" value="260" class=" " title="Cochez ici" />
    <label>Mardi 19h 21h30</label> <br/>

    <input type="checkbox" name="checkbox_group_5[]" onclick="calculate()" value="260" class=" " title="Cochez ici" />
    <label>Vendredi 19h 21h30</label>

    <input type="text" size="2" name="total" value="0"/>

    </fieldset>
    </form>

  3. #3
    Join Date
    Sep 2008
    Posts
    12
    Hello,
    thanks for your help. Something is wrong, for some reason i am not getting any values, total stays at 0.
    thanks

  4. #4
    Join Date
    Aug 2013
    Posts
    6
    Hi!
    I 've verified at my end and it is working fine. Further you can initialize the "end" variable in window.onload function as you did with checked variable. And then before for loop just add the condition that if(end>0).
    thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles