Solved

Totalling up check boxes

Posted on 2004-10-30
128 Views
Last Modified: 2012-06-27
I have the following code, and would basically like to calculate a total for the checkboxes checked. I cant use the value= part of the field because this holds a unique ID for the item.

So I was thinking of doing an "onclick add 15 to total field" type thing. Can anyone help me do this, and also recalculate the total when teh checkbox is unchecked?


<form name="form1" method="post" action="">
  <p>
    <input name="item[]" type="checkbox" id="item[]" value="1">
    Item 1<br>
    <input name="item[]" type="checkbox" id="item[]" value="2">
    Item 2<br>
    <input name="item[]" type="checkbox" id="item[]" value="3">
    Item 3</p>
  <p>Total
    <input type="text" name="textfield">
  </p>
  <p>
    <input type="submit" name="Submit" value="Submit">
  </p>
</form>
0
Question by:fox_statton
    8 Comments
     
    LVL 13

    Expert Comment

    by:StormyWaters
    Shouldn't you be using the id property for a unique id?
    0
     

    Author Comment

    by:fox_statton
    Oh... wait.. you might actually be right...
    0
     

    Author Comment

    by:fox_statton
    Just looked at it, the value has to be the ID so that I can process it using PHP and Arrays.

    Ive made some progress, Im using:

     <script type="text/javascript">

         function reCalc(v, b)
         {
              var sp = document.getElementById ('total');
              if (!b) v = - v;
              var t = parseInt(sp.innerHTML);
              sp.innerHTML = parseInt(t) + parseInt(v);
         }


     </script>


    and then:


         <input type="checkbox" name="array[]" valuex="19.50" value="12" onClick="reCalc(this.valuex, this.checked);">
    Total:
            &pound;<span id="total">0</span>




    Problem is that this doesnt handle decimals, can anyone help?






    0
     
    LVL 31

    Expert Comment

    by:GwynforWeb
    try these

    <script>
    function getTotal(form){
     total=0
     for (i=0;i<form.elements.length;i++)
       if (form.elements[i].id="item[]") total+=form.elements[i].checked
     form.textfield.value=total
    }
    </script>

    <form name="form1" method="post" action>
      <p><input name="item[]" type="checkbox" id="item[]" value="1"> Item 1<br>
        <input name="item[]" type="checkbox" id="item[]" value="2"> Item 2<br>
        <input name="item[]" type="checkbox" id="item[]" value="3"> Item 3</p>
      <p>Total
        <input type="text" name="textfield"><br>
        <input type="button" value="get total" onclick="getTotal(this.form)"> </p>
        <input type="submit" name="Submit" value="Submit"> </p>
    </form>

    you could also put the function call on the onclick event of each checkbox to update automatically
     
    <script>
    function getTotal(form){
     total=0
     for (i=0;i<form.elements.length;i++)
       if (form.elements[i].id="item[]") total+=form.elements[i].checked
     form.textfield.value=total
    }
    </script>

    <form name="form1" method="post" action>
      <p><input name="item[]" type="checkbox" id="item[]" value="1"  onclick="getTotal(this.form)"> Item 1<br>
        <input name="item[]" type="checkbox" id="item[]" value="2"  onclick="getTotal(this.form)"> Item 2<br>
        <input name="item[]" type="checkbox" id="item[]" value="3"  onclick="getTotal(this.form)"> Item 3</p>
      <p>Total
        <input type="text" name="textfield" value='0'><p>
        <input type="submit" name="Submit" value="Submit"> </p>
    </form>


    0
     
    LVL 31

    Expert Comment

    by:GwynforWeb
    or perhaps it is this that you need ?

    <script>
    function getTotal(form){
     total=0
     for (i=0;i<form.elements.length;i++)
       if (form.elements[i].checked && form.elements[i].name=="item[]") total+=1*form.elements[i].id
     form.textfield.value=total
    }
    </script>

    <form name="form1" method="post" action>
      <p><input name="item[]" type="checkbox" id="34" value="1" onclick="getTotal(this.form)">
      Item 1<br>
      <input name="item[]" type="checkbox" id="56" value="2" onclick="getTotal(this.form)"> Item
      2<br>
      <input name="item[]" type="checkbox" id="11" value="3" onclick="getTotal(this.form)"> Item
      3</p>
      <p>Total <input type="text" name="textfield" value="0"></p>
      <p><input type="submit" name="Submit" value="Submit"> </p>
    </form>
    0
     
    LVL 31

    Expert Comment

    by:GwynforWeb
    my last post is the one you want
    0
     

    Author Comment

    by:fox_statton
    Hi thats great, just one more thing. Is there a way to show only two decimal places in the total field, with it rounding down if there are more?
    0
     
    LVL 31

    Accepted Solution

    by:
    <script>
    function getTotal(form){
     total=0
     for (i=0;i<form.elements.length;i++)
       if (form.elements[i].checked && form.elements[i].name=="item[]") total+=1*form.elements[i].id
     form.textfield.value=total.toFixed(2)
    }
    </script>

    <form name="form1" method="post" action>
      <input name="item[]" type="checkbox" id="34.6767" value="1"onclick="getTotal(this.form)"> Item 1<br>
      <input name="item[]" type="checkbox" id="56.553" value="2" onclick="getTotal(this.form)">Item 2<br>
      <input name="item[]" type="checkbox" id="11.367" value="3" onclick="getTotal(this.form)">Item 3</p>
     
      <p>Total <input type="text" name="textfield" value="0"></p>
      <p><input type="submit" name="Submit" value="Submit"></p>
    </form>
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Shellfire Box VPN + Lifetime Subscription

    The Shellfire Box easily connects all of your devices, even those that don't offer the possibility to establish a safe vpn connection. Access blocked content and surf safely, no matter where in the world you are located.

    Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
    I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    856 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now