Checkbox sum calculation help!

@deadlydragon121Sep 19.2011

Hi I am trying to show a total value in my form which is going to be affected by the values of the checkboxes on my page. I have searched for scripts but the problem is that the number of checkboxes are dynamic.

For example:

foreach($row as $result):

<input type=”checkbox” name=”expensearr[]” value=”<?php echo $result[0]; ?>” checked>

endforeach;

These are my checkboxes which will have different values, I want to add these up and display them as a total value on the same page.

If you require any more info please let me know.

Any help would be greatly appreciated! ?

to post a comment

JavaScript

9 Comments(s) _↴

@deadlydragon121authorSep 19.2011 — #anyone? ?

@KorSep 20.2011 — #Could be something like:

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 &lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
 &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
 &lt;script type="text/javascript"&gt;
 function calculate(){
 var checks=document.getElementsByName('expensearr[]'), c, i=0, total=0;
 while(c=checks[i++]){
 c.checked?total+=Number(c.value):null;
 }
 document.getElementById('total').innerHTML=total;
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form action=""&gt;
 1 &lt;input type="checkbox" name="expensearr[]" value="1" checked="checked"&gt;
 2 &lt;input type="checkbox" name="expensearr[]" value="2" checked="checked"&gt;
 3 &lt;input type="checkbox" name="expensearr[]" value="3" checked="checked"&gt;
 4 &lt;input type="checkbox" name="expensearr[]" value="4" checked="checked"&gt;
 &lt;br&gt;
 &lt;input type="button" onclick="calculate()" value="Add values"&gt;
 &lt;/form&gt;
 &lt;br&gt;
 &lt;br&gt;
 &lt;div id="total"&gt;&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@deadlydragon121authorSep 20.2011 — #Could be something like:

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 &lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
 &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
 &lt;script type="text/javascript"&gt;
 function calculate(){
 var checks=document.getElementsByName('expensearr[]'), c, i=0, total=0;
 while(c=checks[i++]){
 c.checked?total+=Number(c.value):null;
 }
 document.getElementById('total').innerHTML=total;
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form action=""&gt;
 1 &lt;input type="checkbox" name="expensearr[]" value="1" checked="checked"&gt;
 2 &lt;input type="checkbox" name="expensearr[]" value="2" checked="checked"&gt;
 3 &lt;input type="checkbox" name="expensearr[]" value="3" checked="checked"&gt;
 4 &lt;input type="checkbox" name="expensearr[]" value="4" checked="checked"&gt;
 &lt;br&gt;
 &lt;input type="button" onclick="calculate()" value="Add values"&gt;
 &lt;/form&gt;
 &lt;br&gt;
 &lt;br&gt;
 &lt;div id="total"&gt;&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

[/QUOTE]

Sounds good, let me give it a try. P.S thanks for replying, I thought this thread was dead ?

@deadlydragon121authorSep 20.2011 — #Ok I jus tried it, the concept works although the value I am getting is off. The values I have are 20.00 and 40.00 but the function is outputting the value 277? Bizzare!

@JMRKERSep 20.2011 — #Ok I jus tried it, the concept works although the value I am getting is off. The values I have are 20.00 and 40.00 but the function is outputting the value 277? Bizzare![/QUOTE]

What is 'bizzare' (sic) is you asking for solutions when you provide no code you are using! :eek:

'Kor's code works fine for what you were asking about.

How did you use his suggestion? Either some code or a link to the code. :rolleyes:

@deadlydragon121authorSep 20.2011 — #What is 'bizzare' (sic) is you asking for solutions when you provide no code you are using! :eek:

'Kor's code works fine for what you were asking about.

How did you use his suggestion? Either some code or a link to the code. :rolleyes:[/QUOTE]

Haha that is why I asked if any further info was needed you'd be welcome, when I get hold of the code tommorow on the other laptop I will post some of my code. Thanks for the heads up either way ?

@deadlydragon121authorSep 21.2011 — #Heres the code you requested: (relating to the issue)

[CODE]
 
 (Getting the values for each checkbox)
 
 <?php 
 $row = outstanding_expense($_GET['bank_id'], $con);
 //for each expense
 
 foreach($row as $result): ?> 
 <td><input type="checkbox" name="expensearr[]" value="<?php echo $result[0]; ?>" checked></td>
 
 <?php endforeach;?>
 
 (Button used for calculating the values)
 
 <p><input type="button" onclick="calculate()" value="Add values"></p>
 
 (Script used for calculation)
 
 <script type="text/javascript">
 function calculate() {
 var checks=document.getElementsByName('expensearr[]'), c, i=0, total=0;
 while(c=checks[i++]){
 c.checked?total+=Number(c.value):null;
 }
 document.getElementById('total').innerHTML=total;
 }
 </script>
 
 [/CODE]

Now I'll recap on what I need to do. Each value for each checkbox will have a total amount (update) and now while writing this I realised why it didn't work. The value I was setting the checkboxes were wrong!

Thanks a lot although I have one further issue, how do I make it calculate to two decimal places (as I'm calculating money!)

ACTUALLY - how can I output the value like this for example Total = £.... in bold? Instead of just a number?

@deadlydragon121authorSep 21.2011 — #Solved.

What I did was:

[CODE]
 <script type="text/javascript">
 function calculate() {
 var checks=document.getElementsByName('expensearr[]'), c, i=0, total=0;
 while(c=checks[i++]){
 [COLOR="Red"]c.checked?total+=Number(c.value):null;
 var intro = "<h3>Total=&#163;";
 var end = "</h3>";[/COLOR]
 }
 
 [COLOR="Red"]document.getElementById('total').innerHTML=intro+total.toFixed(2)+end;[/COLOR]
 }
 </script>
 
 <body onload="calculate() ;">
 [/CODE]

@JMRKERSep 21.2011 — #Solved.

What I did was:

...[/QUOTE]

Good.

Good Luck!

?

Also in #JavaScript _↴

Javascript and Coldfusion scroll bars on left?Textfields and Date help asap

Success!

Help @deadlydragon121 spread the word by sharing this article on Twitter...

Tweet This

Checkbox sum calculation help!

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Checkbox sum calculation help!

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴