Checkbox Calculation Javascript

**tm1274** · 03-11-2006, 07:25 PM

I am a newbie to Javascript and am trying to place 3 or 4 checkboxes on a page that will allow a total to show in a text field. Basically if checkbox 1 is selected the text field would show $10.00, if check box 2 were selected $20.00 would show in the text field. I have been all over the internet and cannot seem to find an example. I would like to have the code to only allow one checkbox to be selected at a time but I will take anything at this point. If someone could point me in the direction of a good tutorial or could give me an example any help would be greatly appreciated.

**Skorch** · 03-11-2006, 10:57 PM

It doesn't really calculate anything it just shows what selection was made.

Code:

<html>
<head>
<script type="text/javascript">
function check(tens)
{
document.getElementById("answer").value=tens
}
</script>
</head>

<body>
<form>
<input type="radio" name="tens" onclick="check(this.value)" value="10">10<br />
<input type="radio" name="tens" onclick="check(this.value)" value="20">20<br />
<input type="radio" name="tens" onclick="check(this.value)" value="30">30<br />
<input type="radio" name="tens" onclick="check(this.value)" value="40">40<br />
<input type="radio" name="tens" onclick="check(this.value)" value="Word String">Word String<br />
<br />
The selected answer is: <input type="text" id="answer" size="20">
</form>
</body>

</html>

**tm1274** · 03-11-2006, 11:12 PM

Thanks, that is what I was looking for. Hopefully I can get this estimate form up and running soon.

**funkdaddu** · 03-14-2006, 09:49 AM

This is what you're looking for:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<script type="text/javascript"><!--

function calc() {
	theTotal = 0;
	checkForm = document.FormName;
	for (i=0; i <= checkForm.length-1; i++) {
		if (checkForm.elements[i].type == "checkbox") {
			if (checkForm.elements[i].checked == true) {
				theTotal += 10;
			}
		}
	}
	document.getElementById("total").innerHTML = theTotal;
}
//-->
</script>
	</head>

	<body bgcolor="#ffffff">
		<form id="FormName" action="" method="get" name="FormName">
			<p><input type="checkbox" name="checkboxName" value="checkboxValue" onchange="calc();"> Check</p>
			<p><input type="checkbox" name="checkboxNameOne" value="checkboxValue" onchange="calc();"> Check</p>
			<p><input type="checkbox" name="checkboxNameTwo" value="checkboxValue" onchange="calc();"> Check</p>
			<p><input type="checkbox" name="checkboxNameThree" value="checkboxValue" onchange="calc();"> Check</p>
			<p><input type="checkbox" name="checkboxNameFour" value="checkboxValue" onchange="calc();"> Check</p>
			<p><input type="checkbox" name="checkboxNameFive" value="checkboxValue" onchange="calc();"> Check</p>
		</form>
		<p>Total: $<span id="total">0</span></p>
	</body>

</html>

**Woodburn** · 05-02-2006, 02:43 PM

Good solution funkdaddu!

I used it in a page Im building however I would also like to pass(email) the amount displayed on the form.

I tried changing the span to an input text box however could not get the function to work. Do you or does anyone else know how I can create a calculation total using checkboxes that can be passed into an email?

Many many thanks

**funkdaddu** · 05-03-2006, 02:04 PM

Depends how you send the email - link (<a href="mailto:test@test.com">) or a script (PHP, ASP, etc)?

You can have the total placed via JS into a text input box or a hidden field.

**Woodburn** · 05-09-2006, 09:42 AM

Im doing it in ASP however was able to figure it out.

I modified "innerHTML" to "value", then put the "total" in an input box that was readonly.

However... I just learned this morning one of the ten checkboxes on my form is a different value. Nine of the checkboxes=25 and one=35. (Argh!) So it looks like Im back at square one since Im a relative newbie at this...

Any ideas?

**funkdaddu** · 09:59 AM

That's easy to fix... change:

Code:

theTotal += 10;

to

Code:

theTotal += checkForm.elements[i].value;

That way it used the input value not a predefined number and make sure all your input checkbox values are what they should be - i just used random numbers for values:

Code:

<p><input type="checkbox" name="checkboxName" value="10" onchange="calc();"> Check</p>
<p><input type="checkbox" name="checkboxNameOne" value="13" onchange="calc();"> Check</p>
<p><input type="checkbox" name="checkboxNameTwo" value="156" onchange="calc();"> Check</p>
<p><input type="checkbox" name="checkboxNameThree" value="16" onchange="calc();"> Check</p>
<p><input type="checkbox" name="checkboxNameFour" value="20" onchange="calc();"> Check</p>
<p><input type="checkbox" name="checkboxNameFive" value="30" onchange="calc();"> Check</p>

**Woodburn** · 05-09-2006, 05:58 PM

Thanks
I tried your solution but it didnt work since I made a few other changes I failed to mention...

1.
I modified the onchanges to onclicks
With onchanges, the changes in the readonly input total box miscalculated - however the total box worked properly with onclick

2.
I start with a value of 65 instead of 0:
theTotal = 65;
The value shown is "65" in the input box
input name="total" value="65" size="3" readonly

3.
The value for the clickboxes ="On" instead of a numerical value
value="On"

-------

When modified the script,

From: theTotal += 10;
To: theTotal += checkForm.elements[i].value;
And put actualy values in the input checkboxes instead of setting them as "On"

the total box adds digits to the string rather than adding them numerically.

For example: I start with 65 in the total box. If a activate a checkbox I see "6510" rather than "75".

I tried removing the value "65" from the input
input name="total"size="3" readonly
but it still does the same thing, "6510" instead of "75"

Im at a loss. It's probably something simple Im missing. Feel free to make me feel stpuid if you see where Im fouling up.

**funkdaddu** · 05-09-2006, 10:58 PM

If you can post your current code, I'll see if I can help you out, but you can use parseInt(value) to make sure values are taken as numbers and not strings.

**Woodburn** · 05-10-2006, 10:34 AM

Thanks so much!!! I couldnt have done this without you funkdaddu!
Here's the code...

Code:

<!--
function calc() {
theTotal = 65;
checkForm = document.FormName;
for (i=0; i <= checkForm.length-1; i++) {
if (checkForm.elements[i].type == "checkbox") {
if (checkForm.elements[i].checked == true) {
theTotal += parseInt(checkForm.elements[i].value);
}
}
}
document.getElementById("total").value = theTotal;
}
//-->

And the form:

Code:

 
<input type="checkbox" name="check1" value="125" onclick="calc();">
<input type="checkbox" name="check2" value="35" onclick="calc();">
<input type="checkbox" name="check3" value="25" onclick="calc();">
<input type="checkbox" name="check4" value="25" onclick="calc();">
<input name="total" value="65" size="3" readonly>

Again, thanks so much. The form I put together is for a non-profit fishing tourmanet. All volunteer work. I'll send you a few Tshirts and other swag I can find in the office if you're interested. I really appreciate your help.

**funkdaddu** · 05-10-2006, 03:20 PM

I had to change

Code:

document.getElementById("total").value = theTotal;

to

Code:

checkForm.total.value = theTotal;

and it works fine for me - you didn't have the id set for the total, I just used the name instead... is there something else that needed to be done to this?

**Woodburn** · 05-11-2006, 09:31 AM

Hrm

Using

Code:

document.getElementById("total").value = theTotal;

worked for me. The form is working and again thanks your help. Much appreciated.