PDA

View Full Version : How to get the sum of selected checkboxes

Colleen
March 6th, 2006, 01:08
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.

Also found this, not sure it will help, http://www.mcfedries.com/JavaScript/OrderTotals.asp
the_pm
March 6th, 2006, 01:42
Coding it up for you now :)
the_pm
March 6th, 2006, 02:13
Copy, paste, adjust, enjoy :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Untitled</title>
<script type="text/javascript">
var Tags = new Array();

function addme() {
var tot = 0;
var Tags = document.getElementsByTagName("input");
for (i=0; i<Tags.length; i++) {
if ((Tags[i].className == "foo") && (Tags[i].checked == true)) {
tot = tot + parseFloat(Tags[i].value);
}
}
document.getElementById('total').value = (tot/100);
}
</script>
</head>

<body>
<form action="" method="post">
<p><input type="checkbox" class="foo" value="1799" /> Item 1 - $17.99</p>
<p><input type="checkbox" class="foo" value="1500" /> Item 2 - $15.00</p>
<p><input type="checkbox" class="foo" value="999" /> Item 3 - $9.99</p>
<p><input type="button" onclick="addme()" value="Add Me" /></p>
<p>$<input type="text" id="total" style="border:none ; padding:0" /></p>
</form>

</body>
</html>Stick the script into an external document, and everything validates. But it all works, just as written.

If you'd like a full explanation of each line, let me know and I'll break it down for you :)
Colleen
March 6th, 2006, 03:45
Wow, thanks Paul! I didn't know you can code up a Javascript!

I will play with it tomorrow, I am off to bed, been up since 5am.

Thanks again, this is a lot less code than anything I found.
the_pm
March 6th, 2006, 04:06
I've only fairly recently added JavaScript to my "I can actually do that in a semi-professional capacity" list. Glad to help :)
Colleen
March 6th, 2006, 14:11
:D Paul, before you posted that last night, I had found this, http://www.madirish.net/tech.php?section=1&article=7

It's a bit of a long script when you start adding items, so I'd prefer yours, however, I have a question.

What I want most was see when you click the checkboxes at that link it shows the sum in the box? It happens live, that's what I want so they don't have to click anything. I wish I knew how to edit yours to change it to that without bugging you, lol.
the_pm
March 6th, 2006, 15:02
Easy as pie :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Untitled</title>
<script type="text/javascript">
var Tags = new Array();

function addme() {
var tot = 0;
var Tags = document.getElementsByTagName("input");
for (i=0; i<Tags.length; i++) {
if ((Tags[i].className == "foo") && (Tags[i].checked == true)) {
tot = tot + parseFloat(Tags[i].value);
}
}
document.getElementById('total').value = (tot/100);
}
</script>
</head>

<body>
<form action="" method="post">
<p><input type="checkbox" class="foo" value="1799" onmouseout="addme()" /> Item 1 - $17.99</p>
<p><input type="checkbox" class="foo" value="1500" onmouseout="addme()" /> Item 2 - $15.00</p>
<p><input type="checkbox" class="foo" value="999" onmouseout="addme()" /> Item 3 - $9.99</p>
<p>$<input type="text" id="total" style="border:none ; padding:0" /></p>
</form>

</body>
</html>All I did was move the event handler from a button to the checkboxes. When your mouse leaves the vicinity of the check box, the total updates. The reason you don't want to do it on mouse click is because the update takes place before the box gets checked. The reason you don't want to do it on mouse up is because you can click a box, keep the mouse pressed down, move off the button and release, and this can foul up the math. So, the way you see above it is the right way to do it. :)
the_pm
March 6th, 2006, 15:05
I just checked out the version you linked above. It's waaaay to much code to achieve the desired effect, but beyond that, the coding used predates DOM, and it requires you to name your form. Try giving a form a name within an HTML/XHTML Strict doctype and see what the validator has to say about it ;)
marnimatul
March 6th, 2006, 18:47
Paul/Colleen,

Would it be okay with you if I used this script as well? I am putting together a little site for a friend to sell her art pieces and this would be perfect!

*Paul's new fan*:hi:
the_pm
March 6th, 2006, 19:00
Yup, all yours. I don't post anything unless I fully intend for it to get used by whoever wants to take part it in :)

(I still haven't figured out your scroller yet. I can make it scroll, but I can't make it stop :oops: )
Colleen
March 6th, 2006, 19:56
That's fine, marnimatul.

Paul, are you saying we can't get yours to show the sum automatically without clicking? The site I am using it on isn't xhtml anyway, just html 4.0, I would prefer it to validate of course. :)
the_pm
March 6th, 2006, 20:01
No, it works without clicking, just like you asked. Try the second script I uploaded. :)

I was explaining a deficiency within the script you linked that is not present in the one I wrote.
Colleen
March 6th, 2006, 20:05
Great. Thanks Paul! :D
the_pm
March 6th, 2006, 20:11
You're welcome Colleen. Let me know if the second version works and if it does what you want it to do. If not, describe what you want further, and I'll put it together :)
marnimatul
March 7th, 2006, 03:20
Thanks guys, my friend will be pleasantly surprised.
Colleen
March 7th, 2006, 17:13
Ok, I just got this setup. I have a slight problem. When I fill out the form and check some products, the results it sends me is it sends the last item checked only and it's only a number, ie; 3500 if the price is $35.00.

I need it to send me the name of the products checked and all the products checked. So is there a way to do this without using the "value" field?

Here's how one of the products is setup.
<input type="checkbox" id="2JavaDeelite" name="product_service" class="foo" value="3500" onmouseout="addme()">

And the page can be viewed here, http://www.2skin.com/order2.html

OT: Compared to the original order page, the new one is much better. See the existing one, http://www.2skin.com/order.html

:D
the_pm
March 7th, 2006, 17:27
Try this: <input type="checkbox" id="2JavaDeelite" name="2JavaDeelite" class="foo" value="3500" onmouseout="addme()">
and make each name the same as the ID. The ones that people order will have prices next to them, the others will be blank. That's how you'll know which ones were ordered.

Or does this get emailed to the person who orders as well as to you? If this is the case, you probably want the formatting to be proper and pretty, right?

I would need to customize this heavily to output the desired result in email, with all prices displaying the way you need, and only the products chosen actually being listed. Is this what you need done?
Colleen
March 7th, 2006, 17:33
It's only sent to me and my partner. :) Thanks, Paul. I will do that.
the_pm
March 7th, 2006, 17:37
I take it you'll have no problem figuring out that 3500 really means 35.00 should be charged? :)

If you'd like it prettier, I can make it format those values for you...
Colleen
March 7th, 2006, 17:41
I was just about to ask if it could send the decimal, lol... but if it's a lot of work, it's good this way. :D
the_pm
March 7th, 2006, 21:01
Ok, generic product addition script v 1.2 :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Untitled</title>
<script type="text/javascript">
var Tags = new Array();

function addme() {
document.getElementById('total').value = ""
var tot = 0;
var Tags = document.getElementsByTagName("input");
for (i=0; i<Tags.length; i++) {
if ((Tags[i].className == "foo") && (Tags[i].checked == true)) {
tot = parseFloat(tot) + parseFloat(Tags[i].value);
}
}
document.getElementById('total').value = tot.toFixed(2);
}
</script>
</head>

<body>
<form action="" method="post">
<p><input type="checkbox" class="foo" value="17.99" onchange="addme()" onmouseout="addme()" /> Item 1 - $17.99</p>
<p><input type="checkbox" class="foo" value="15.00" onchange="addme()" onmouseout="addme()" /> Item 2 - $15.00</p>
<p><input type="checkbox" class="foo" value="9.99" onchange="addme()" onmouseout="addme()" /> Item 3 - $9.99</p>
<p>$<input type="text" id="total" style="border:none ; padding:0" /></p>
</form>

</body>
</html>I completely forgot about toFixed(n), which takes care of the problem I was having earlier that made me remove the decimals in the first place :)

Try that, just like it is, and see if it does what you need it to do.
Colleen
March 7th, 2006, 22:11
It's perfect, Paul. Thank you.

What can I do for you? You do so much for me. :D I will put your link on 2skin's link page, there's not much there right now. Just like 3-4 sites. ;)
the_pm
March 7th, 2006, 22:17
I'm glad it works for you :)

You don't owe me anything. You never did. We share knowledge - that's what this is all about. Not to minimize the importance of this for you, but you only asked the question. The answer is given to everyone. ;)
Colleen
March 7th, 2006, 23:15
:) Very good way to look at it, Paul. :)
Anoop
March 8th, 2006, 04:39
One suggestion, Paul. I think "onchange" is the right event to be used. It gives the correct result even when the user uses keyboard to check the check box.
Just try it :)

-Anoop
the_pm
March 8th, 2006, 04:49
Anoop, try the script with onchange instead of onmouseout. This was the reason I chose the mouse-based event handler, not ideal given what you're describing, but much better than what's happening with onchange!

Any thoughts on how to make it work with onchange?
the_pm
March 8th, 2006, 04:55
Hmm, I sort of figured it out...use both :D

I've updated the script in the post a few up.
Anoop
March 8th, 2006, 05:04
Paul, what is the problem with using onchange alone. I didn't get you :blush:
the_pm
March 8th, 2006, 05:07
Try it for yourself Anoop. Put in onchange, remove the onmouseout event handler, and then try clicking the checkboxes with your mouse. The script lags one click back!
Anoop
March 8th, 2006, 05:15
I tried the following code both in firefox and opera and it works fine.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Untitled</title>
<script type="text/javascript">
var Tags = new Array();

function addme() {
document.getElementById('total').value = ""
var tot = 0;
var Tags = document.getElementsByTagName("input");
for (i=0; i<Tags.length; i++) {
if ((Tags[i].className == "foo") && (Tags[i].checked == true)) {
tot = parseFloat(tot) + parseFloat(Tags[i].value);
}
}
document.getElementById('total').value = tot.toFixed(2);
}
</script>
</head>
<body>
<form action="" method="post">
<p><input type="checkbox" class="foo" value="17.99" onchange="addme()" /> Item 1 - $17.99</p>
<p><input type="checkbox" class="foo" value="15.00" onchange="addme()" /> Item 2 - $15.00</p>
<p><input type="checkbox" class="foo" value="9.99" onchange="addme()" /> Item 3 -$9.99</p>
<p>$<input type="text" id="total" style="border:none ; padding:0" /></p>
</form>

</body>
</html>
the_pm
March 8th, 2006, 05:21
Try it in IE ;)

Unfortunately, we can't ignore IE users. That will be the day...
Anoop
March 8th, 2006, 05:33
Oh Sorry for the confusion. I'm working in a linux box, so I didn't try it out in IE. :D
Colleen
March 8th, 2006, 13:04
hehe... I see you're having more fun with the script, Paul. Should I be updating my script to what you posted here?