Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Totalling up check boxes

Posted on 2004-10-30
8
Medium Priority
?
133 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
Comment
Question by:fox_statton
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 13

Expert Comment

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

Author Comment

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

Author Comment

by:fox_statton
ID: 12454286
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12454349
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
ID: 12454385
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
ID: 12454504
my last post is the one you want
0
 

Author Comment

by:fox_statton
ID: 12456218
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:
GwynforWeb earned 500 total points
ID: 12456608
<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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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…

609 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