Add checkbox values and display total in plain text!

rockstardub · Sep 8, 2005

Code:

<html>
<head>
<script language="JavaScript">
// by Kirk Strobeck | kirkstrobeck.com | kirk@strobeck.com //
function initialize() {
     Total = 0;
     totalprice.innerText = Total;
}
function checkoption(checkbox) {
     checknum = parseInt(checkbox.value); //Turn the value into a number
     if (checkbox.checked == true) { 
          Total += checknum;
     } else { 
          Total -= checknum;
     }
     totalprice.innerText = Total;
}
</script>
</head>
<body onload="initialize();">
     <form name="main">
          <input type="checkbox" name="feature1" value="100" onclick="checkoption(this);"> Item Cost: $100<br>
          <input type="checkbox" name="feature2" value="300" onclick="checkoption(this);"> Item Cost: $300<br>
          <input type="checkbox" name="feature3" value="700" onclick="checkoption(this);"> Item Cost: $700<br>
     </form>
Your total is: <b>&#36;<span id="totalprice"></span>.00</b>
</body>
</html>

Enjoy!

Jonnn · Sep 8, 2005

Is it me, I always thought variables could not start with a Capital letter.

I am referring to the variable 'Total'

Correct me if I am wrong here.

---------------------------------------
Thanks for your help,
Jon

http://www.freewebs.com/jonsbikes

LFI · Sep 8, 2005

It's okay to use caps in variables as long as you do it for the same variable every time you use it (i.e., variables are case-sensitive).

--Dave

LFI · Sep 8, 2005

rockstardub,

Your script works for me in IE6. Are you experiencing problems?

--Dave

adam0101 · Sep 8, 2005

Is this a question or a tip? I do see a few things that might cause problems on other browsers. These additions should fix that:

Code:

<html>
<head>
<script language="JavaScript">
// by Kirk Strobeck | kirkstrobeck.com | kirk@strobeck.com //
[b]var Total = 0;
var totalprice;[/b]
function initialize() {
     Total = 0;
     [b]totalprice = document.getElementById("totalprice");[/b]
     totalprice.innerText = Total;
}
function checkoption(checkbox) {
     checknum = parseInt(checkbox.value); //Turn the value into a number
     if (checkbox.checked == true) { 
          Total += checknum;
     } else { 
          Total -= checknum;
     }
     totalprice.innerText = Total;
}
</script>
</head>
<body onload="initialize();">
     <form name="main">
          <input type="checkbox" name="feature1" value="100" onclick="checkoption(this);"> Item Cost: $100<br>
          <input type="checkbox" name="feature2" value="300" onclick="checkoption(this);"> Item Cost: $300<br>
          <input type="checkbox" name="feature3" value="700" onclick="checkoption(this);"> Item Cost: $700<br>
     </form>
Your total is: <b>&#36;<span id="totalprice"></span>.00</b>
</body>
</html>

Adam

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Add checkbox values and display total in plain text!

rockstardub

Programmer

Jonnn

Programmer

LFI

Programmer

LFI

Programmer

adam0101

Programmer

Similar threads

Part and Inventory Search

Sponsor