How to get the sum of selected checkboxes?

Discussion in 'JavaScript' started by Colleen, Mar 5, 2006.

  1. #1
    I have a form. It has several products. Each product has a price listed. Each product can be selected via a checkbox.

    What I would like to do is have the sum of each selected product, added in total at the bottom of the form.

    I would prefer to use javascript/dhtml for this, I don't want anything complex, just something to add to the page and have it display the total live as the customer checks/unchecks a product.

    All I can find even remotely similar is this, http://javascript.internet.com/forms/confirm-order.html

    It doesn't do what I want, plus it doesn't work with my form.

    Just found this, not sure it will help, http://www.mcfedries.com/JavaScript/OrderTotals.asp
     
    Colleen, Mar 5, 2006 IP
  2. jimrthy

    jimrthy Guest

    Messages:
    283
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Start out with an array that has the price for each checkbox. Each checkbox's onclick method calls a function with the checkbox's id and an index into that array. The function checks to see whether the checkbox just got en-/dis-abled and adds/subtracts from the total price appropriately.

    It can be tricky to get right, but isn't everything with javascript? :)

    It gets nastier if you're generating the page dynamically (and you will be doing that, won't you?). When I first started learning ASP.NET, I tried to do this. It turned into yet another one of those "If MS didn't already provide a control for you to do this, just forget it" things.
     
    jimrthy, Mar 5, 2006 IP
  3. Colleen

    Colleen Illustrious Member

    Messages:
    6,777
    Likes Received:
    725
    Best Answers:
    1
    Trophy Points:
    430
    #3
    It's just for a basic html page. :)

    I definitley have a headache from trying to figure this out today, I don't know anything about Javascript, was just hoping someone knew or can point me in the right direction.
     
    Colleen, Mar 5, 2006 IP
  4. Colleen

    Colleen Illustrious Member

    Messages:
    6,777
    Likes Received:
    725
    Best Answers:
    1
    Trophy Points:
    430
    #4
    Colleen, Mar 5, 2006 IP
  5. marty

    marty Peon

    Messages:
    154
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I'm not sure if this is what you need, but maybe it will help...



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head><title>Untitled</title></head>
    <body>
    <form>
    <input onclick="clickCh(this)" type="checkbox" name="one" value="10"> $10.00<br>
    <input onclick="clickCh(this)" type="checkbox" name="two" value="12"> $12.00<br>
    <br>
    <input id="total" type="text" name="total">
    </form>
    <script language="JavaScript" type="text/javascript">
    var total = document.getElementById("total")
    function clickCh(caller){
    if(caller.checked){
    add(caller)
    } else {
    subtract(caller)
    }
    }
    function add(caller){ total.value = total.value*1 + caller.value*1}
    function subtract(caller){ total.value = total.value*1 - caller.value*1}
    </script>
    </body>
    </html>
     
    marty, Mar 6, 2006 IP
    Colleen likes this.
  6. Colleen

    Colleen Illustrious Member

    Messages:
    6,777
    Likes Received:
    725
    Best Answers:
    1
    Trophy Points:
    430
    #6
    Thanks, Marty. I will check it out and see if it's what I need. :)
     
    Colleen, Mar 6, 2006 IP
  7. DuncanM

    DuncanM Well-Known Member

    Messages:
    136
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    108
    #7
    Colleen,
    Did you get your page to work?
     
    DuncanM, Mar 6, 2006 IP
  8. marty

    marty Peon

    Messages:
    154
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #8
    No problem Colleen... let me know
     
    marty, Mar 6, 2006 IP
  9. hana12j

    hana12j Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Thanks marty you have saved much of my time.
    Your code is perfect after some modification with my code.
    Thanks bro.
     
    hana12j, Jul 12, 2012 IP
  10. stewart6491

    stewart6491 Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #10
    Thanks Marty - your code is very useful - even 7 years! later!:D
     
    stewart6491, Jul 8, 2013 IP