Javascript coding counting checkboxes and passing result

JavaScript
1

Hi,
I am trying to get hold of some javascript for the following: I need to add up all ticked checkboxes and then have the result passed to another page. So, if for example i have a number of ticked checkboxes on a page, i need them added up and then the resulting number to be passed to another page. If anyone could help I would greatly appreciate it.

2

Do you mean add up the values associated with each checkbox or simply count the number of checkboxes that are checked?

This will achieve the former: DEMO


<html>
 <head>
  <title>Total CheckBoxes</title>
  <script language="JavaScript" type="text/javascript">
  <!--
   function countChecked(){
	var checkedVal = 0; 
	for(var i=0;i<4;i++){
	 myObj = document.getElementById('check'+i); 
	 if(myObj.checked==true){
[color=royalblue]	  checkedVal = checkedVal + parseInt(myObj.value); 
[/color]	 }
	}
	document.getElementById('myTotal').value = checkedVal;
   }
  //-->
  </script>
 </head>
 <body>
  <form id="myForm">
   <input type="checkbox" id="check0" value="1" />&nbsp;1<br/>
   <input type="checkbox" id="check1" value="2" />&nbsp;2<br/>
   <input type="checkbox" id="check2" value="4" />&nbsp;4<br/>
   <input type="checkbox" id="check3" value="8" />&nbsp;8<br/>
   <input type="text" id="myTotal" size="2" disabled="true" />&nbsp;Total<br/>
   <input type="button" value="Count" onclick="countChecked();" />
  </form>
 </body>
</html>

For the latter, simply change the blue line above to read:

[color=#4169e1]	  checkedVal = checkedVal + 1; [/color]

As for passing the value to another page, there are several ways in which you can do it, but one of the simplest would be to add the following line at the end of function countChecked():


 document.location.href = "http://www.myNewURL?" + checkedVal;

and then strip the value from the end of the URL on the new page.

Andy

3

Thanks for the code. The counting the checked boxes part works but passing the value doesnt. When I click count it counts the checked boxes but brings me to a ‘this page cannot be displayed’.

4 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<script type="text/javascript">

function tallyBoxes(oForm)
{
	var i = n = 0, input, inputs = oForm.getElementsByTagName('input');
	while (input = inputs.item(i++))
		if (input.getAttribute('type') == 'checkbox' && input.checked)
			n++;
	oForm.elements.boxes_checked.value = n;
	show(oForm, n); //demo, remove
}

function show(oForm, n)
{
	oForm.elements.readout.value = n;
}

</script>
</head>
<body>
<h2>page 1</h2>
<form action="next.html" onsubmit="tallyBoxes(this)">
<input type="hidden" name="boxes_checked" value="" />
<input type="text" size="2" name="readout" value="" />___boxes checked<br /><br />
<div style="width:40px;">
<input type="checkbox" name="box" value="1" onclick="tallyBoxes(this.form)" /> 1 <!-- onclick for demo only -->
<input type="checkbox" name="box" value="2" onclick="tallyBoxes(this.form)" /> 2
<input type="checkbox" name="box" value="3" onclick="tallyBoxes(this.form)" /> 3
<input type="checkbox" name="box" value="4" onclick="tallyBoxes(this.form)" /> 4
<input type="checkbox" name="box" value="5" onclick="tallyBoxes(this.form)" /> 5
<input type="checkbox" name="box" value="6" onclick="tallyBoxes(this.form)" /> 6
<input type="checkbox" name="box" value="7" onclick="tallyBoxes(this.form)" /> 7
<input type="checkbox" name="box" value="8" onclick="tallyBoxes(this.form)" /> 8
<input type="checkbox" name="box" value="9" onclick="tallyBoxes(this.form)" /> 9
<input type="checkbox" name="box" value="0" onclick="tallyBoxes(this.form)" /> 10
<input type="checkbox" name="box" value="11" onclick="tallyBoxes(this.form)" /> 11
<input type="checkbox" name="box" value="12" onclick="tallyBoxes(this.form)" /> 12
<input type="checkbox" name="box" value="13" onclick="tallyBoxes(this.form)" /> 13
<input type="checkbox" name="box" value="14" onclick="tallyBoxes(this.form)" /> 14
<input type="checkbox" name="box" value="15" onclick="tallyBoxes(this.form)" /> 15
<br />
<input type="submit" value="next" />
</div>
</form>
</body>
</html>

[next.html]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<script type="text/javascript">

onload = function()
{
	var n;
	if (n = location.search.match(/\\?.*boxes_checked=(\\d+)/))
		document.getElementById('readout').value = n[1];
}	

</script>
</head>
<body>
<h2>page 2</h2>
<form>
<input id="readout" type="text" size="2" name="readout" value="" />___boxes checked
</form>
</body>
</html>