...

View Full Version : JavaScript for counting clicked radio buttons & sum them



960x720
10-07-2008, 04:28 AM
I am looking for JavaScript solution to count clicked radio buttons (columns A,B,C) and to display the summary for A, B and C in the total summary box...

rangana
10-07-2008, 04:31 AM
Please show us your markup (HTML), so we could see how the page is layed out.

960x720
10-07-2008, 04:32 AM
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css">
<script src="test.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<form>
<table id="boxes">
<tr>
<th><label>A</label></th><td><input val="a" name="1" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="1" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="1" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="2" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="2" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="2" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="3" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="3" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="3" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="4" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="4" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="4" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="5" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="5" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="5" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="6" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="6" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="6" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="7" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="7" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="7" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="8" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="8" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="8" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="9" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="9" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="9" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="10" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="10" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="10" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="11" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="11" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="11" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="12" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="12" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="12" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="13" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="13" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="13" type="radio"></td>
</tr><tr>
<th><label>A</label></th><td><input val="a" name="14" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="14" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="14" type="radio"></td>
</tr><tr>
<th><label>A</label></th><td><input val="a" name="15" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="15" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="15" type="radio"></td>
</tr><tr>
<th><label>A</label></th><td><input val="a" name="16" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="16" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="16" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="17" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="17" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="17" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="18" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="18" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="18" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="19" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="19" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="19" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="20" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="20" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="20" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="21" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="21" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="21" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="22" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="22" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="22" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="23" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="23" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="23" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="24" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="24" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="24" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="25" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="25" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="25" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="26" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="26" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="26" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="27" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="27" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="27" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="28" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="28" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="28" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="29" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="29" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="29" type="radio"></td>
</tr>
<tr>
<th><label>A</label></th><td><input val="a" name="30" type="radio"></td>
<th><label>B</label></th><td><input val="b" name="30" type="radio"></td>
<th><label>C</label></th><td><input val="c" name="30" type="radio"></td>
</tr>
</table>

<table id="summary">
<tr>
<th><label for="sum_a">A: </label></th><td><input name="sum_a" type="text" size="3" maxlength="3" value="0"></input></td>
</tr>
<tr>
<th><label for="sum_b">B: </label></th><td><input name="sum_b" type="text" size="3" maxlength="3" value="0"></input></td>
</tr>
<tr>
<th><label for="sum_c">C: </label></th><td><input name="sum_c" type="text" size="3" maxlength="3" value="0"></input></td>
</tr>
<tr>
<th colspan="2"><input type="reset" value="Reset"></input></th>
</tr>
</table>
</form>
<div class="clear"></div>
</div>
</script>
</body>
</html>

rangana
10-07-2008, 06:08 AM
See if having this script helps:


function countRad()
{
var rad=document.getElementById('boxes').getElementsByTagName('input'),
sumA=document.getElementsByName('sum_a')[0],
sumB=document.getElementsByName('sum_b')[0],
sumC=document.getElementsByName('sum_c')[0],
a=0,b=0,c=0; // Set the values of a b and c to 0
for(var i=0;i<rad.length;i++)
{
if(rad[i].getAttribute('type').toLowerCase()=='radio'&&rad[i].checked)
{
if(i&#37;3==0) a++; // Count all the "a" radio button
else if(i%3==1) b++; // Count all the "b" radio button
else if(i%3==2) c++; // Count all the "c" radio button
}
}
sumA.value=a; // Assign the value of a
sumB.value=b; // Assign the value of b
sumC.value=c; // Assign the value of c
}
window.onload=function()
{
countRad(); // Check the a, b, and c radio buttons onload
var rad=document.getElementById('boxes').getElementsByTagName('input');
for(var i=0;i<rad.length;i++)
if(rad[i].getAttribute('type').toLowerCase()=='radio')
rad[i].onclick=countRad;
}

960x720
10-07-2008, 10:34 AM
Many thanks it works perfectly. Amazing how simply it can be done. Great help, thanks...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum