www.webdeveloper.com
Results 1 to 10 of 10

Thread: Checkbox sum calculation help!

  1. #1
    Join Date
    Sep 2011
    Posts
    19

    Unhappy Checkbox sum calculation help!

    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!

  2. #2
    Join Date
    Sep 2011
    Posts
    19
    anyone?

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Could be something like:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <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>
    </head>
    <body>
    <form action="">
    1 <input type="checkbox" name="expensearr[]" value="1" checked="checked">
    2 <input type="checkbox" name="expensearr[]" value="2" checked="checked">
    3 <input type="checkbox" name="expensearr[]" value="3" checked="checked">
    4 <input type="checkbox" name="expensearr[]" value="4" checked="checked">
    <br>
    <input type="button" onclick="calculate()" value="Add values">
    </form>
    <br>
    <br>
    <div id="total"></div>
    </body>
    </html>

  4. #4
    Join Date
    Sep 2011
    Posts
    19
    Quote Originally Posted by Kor View Post
    Could be something like:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <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>
    </head>
    <body>
    <form action="">
    1 <input type="checkbox" name="expensearr[]" value="1" checked="checked">
    2 <input type="checkbox" name="expensearr[]" value="2" checked="checked">
    3 <input type="checkbox" name="expensearr[]" value="3" checked="checked">
    4 <input type="checkbox" name="expensearr[]" value="4" checked="checked">
    <br>
    <input type="button" onclick="calculate()" value="Add values">
    </form>
    <br>
    <br>
    <div id="total"></div>
    </body>
    </html>
    Sounds good, let me give it a try. P.S thanks for replying, I thought this thread was dead

  5. #5
    Join Date
    Sep 2011
    Posts
    19
    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!

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259

    Exclamation

    Quote Originally Posted by deadlydragon121 View Post
    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!
    What is 'bizzare' (sic) is you asking for solutions when you provide no code you are using!

    '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.

  7. #7
    Join Date
    Sep 2011
    Posts
    19

    Thumbs up

    Quote Originally Posted by JMRKER View Post
    What is 'bizzare' (sic) is you asking for solutions when you provide no code you are using!

    '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.
    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

  8. #8
    Join Date
    Sep 2011
    Posts
    19

    Thumbs up

    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>
    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 = &#163;.... in bold? Instead of just a number?
    Last edited by deadlydragon121; 09-21-2011 at 03:12 AM.

  9. #9
    Join Date
    Sep 2011
    Posts
    19
    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++]){
    c.checked?total+=Number(c.value):null;
    var intro = "<h3>Total=&#163;";
    var end = "</h3>";
    }
    
    document.getElementById('total').innerHTML=intro+total.toFixed(2)+end;
    }
    </script>
    
    <body onload="calculate() ;">

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259

    Thumbs up

    Quote Originally Posted by deadlydragon121 View Post
    Solved.

    What I did was:
    ...
    Good.
    Good Luck!

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