...

View Full Version : Totaling multiple radio buttons...



Darkslide632
07-05-2011, 06:35 PM
So I used to do a bit of programming about 100 years ago, and now I know just enough to get myself hurt while trying to do it. I was asked to do a couple of javascript quizzes for a project, and was able to produce them through a combination of sheer luck and a coursebook I still have from ~2001. I'm now working on a new one and have run into a wall, even though I know it should be a simple process.

I'm basically looking to make 12 sets of 4 radio buttons, each with a value of 1-4. At the bottom of the page there are 4 text boxes that I would like to keep a running total of all of the 1's, 2's, 3's and 4's as they are selected. I'm not having any luck. Anyone willing to take a stab?



<HTML>
<HEAD>
<TITLE>Communication Styles</TITLE>
<SCRIPT type="text/javascript">








</SCRIPT>
</HEAD>
<BODY>
<BR><BR>
<CENTER><H1><U>Communication Styles</U></H1></CENTER>
<BR><BR>
<FORM>

<TABLE>
<TR><TD>
<TR><TD><B><U>1. Do you tire more easily? Feel fatigued rather than energetic?</U></B><BR><BR>

<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec11" value="1" type="radio">&nbsp;&nbsp;1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec11" value="2" type="radio">&nbsp;&nbsp;2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec11" value="3" type="radio">&nbsp;&nbsp;3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec11" value="4" type="radio">&nbsp;&nbsp;4
<TR><TD><BR>
<TR><TD><B><U>2. Are you annoyed by people telling you that you don't look so good lately?</U></B><BR><BR>

<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec12" value="1" type="radio">&nbsp;&nbsp;1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec12" value="2" type="radio">&nbsp;&nbsp;2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec12" value="3" type="radio">&nbsp;&nbsp;3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec12" value="4" type="radio">&nbsp;&nbsp;4
<TR><TD><BR>
<TR><TD><B><U>3. Are you working harder and harder and accomplishing less and less?</U></B><BR><BR>

<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec13" value="1" type="radio">&nbsp;&nbsp;1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec13" value="2" type="radio">&nbsp;&nbsp;2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec13" value="3" type="radio">&nbsp;&nbsp;3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec13" value="4" type="radio">&nbsp;&nbsp;4
<TR><TD><BR>
<TR><TD><B><U>4. Are you increasingly cynical and disenchanted?</U></B><BR><BR>

<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec14" value="1" type="radio">&nbsp;&nbsp;1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec14" value="2" type="radio">&nbsp;&nbsp;2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec14" value="3" type="radio">&nbsp;&nbsp;3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec14" value="4" type="radio">&nbsp;&nbsp;4
<TR><TD><BR>
<TR><TD><B><U>5. Are you often invaded by a sadness you can't explain?</U></B><BR><BR>

<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec15" value="1" type="radio">&nbsp;&nbsp;1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec15" value="2" type="radio">&nbsp;&nbsp;2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec15" value="3" type="radio">&nbsp;&nbsp;3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec15" value="4" type="radio">&nbsp;&nbsp;4
<TR><TD><BR>
<TR><TD><B><U>6. Are you forgetting (appointments, deadlines, personal possessions)?</U></B><BR><BR>

<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec16" value="1" type="radio">&nbsp;&nbsp;1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec16" value="2" type="radio">&nbsp;&nbsp;2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec16" value="3" type="radio">&nbsp;&nbsp;3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec16" value="4" type="radio">&nbsp;&nbsp;4
<TR><TD><BR>
<TR><TD><B><U>7. Are you increasingly irritable? More short-tempered? More disappointed in the people around you?</U></B><BR><BR>

<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec17" value="1" type="radio">&nbsp;&nbsp;1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec17" value="2" type="radio">&nbsp;&nbsp;2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec17" value="3" type="radio">&nbsp;&nbsp;3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec17" value="4" type="radio">&nbsp;&nbsp;4
<TR><TD><BR>
<TR><TD><B><U>8. Are you seeing close friends and family members less frequently?</U></B><BR><BR>

<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec18" value="1" type="radio">&nbsp;&nbsp;1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec18" value="2" type="radio">&nbsp;&nbsp;2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec18" value="3" type="radio">&nbsp;&nbsp;3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec18" value="4" type="radio">&nbsp;&nbsp;4
<TR><TD><BR>
<TR><TD><B><U>9. Are you too busy to do even routine things like make phone calls, read reports or send out holiday cards?</U></B><BR><BR>

<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec19" value="1" type="radio">&nbsp;&nbsp;1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec19" value="2" type="radio">&nbsp;&nbsp;2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec19" value="3" type="radio">&nbsp;&nbsp;3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec19" value="4" type="radio">&nbsp;&nbsp;4
<TR><TD><BR>
<TR><TD><B><U>10. Are you suffering from physical complaints (aches, pains, headaches)?</U></B><BR><BR>

<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec110" value="1" type="radio">&nbsp;&nbsp;1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec110" value="2" type="radio">&nbsp;&nbsp;2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec110" value="3" type="radio">&nbsp;&nbsp;3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec110" value="4" type="radio">&nbsp;&nbsp;4
<TR><TD><BR>
<TR><TD><B><U>11. Do you feel disoriented when the activity of the day comes to a halt?</U></B><BR><BR>

<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec111" value="1" type="radio">&nbsp;&nbsp;1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec111" value="2" type="radio">&nbsp;&nbsp;2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec111" value="3" type="radio">&nbsp;&nbsp;3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec111" value="4" type="radio">&nbsp;&nbsp;4
<TR><TD><BR>
<TR><TD><B><U>12. Is joy elusive?</U></B><BR><BR>

<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec112" value="1" type="radio">&nbsp;&nbsp;1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec112" value="2" type="radio">&nbsp;&nbsp;2
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec112" value="3" type="radio">&nbsp;&nbsp;3
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';"><TD><input name="sec112" value="4" type="radio">&nbsp;&nbsp;4
<TR><TD><BR>

<TR><TD><B>1's:&nbsp;&nbsp;</B><input type="text" name="SecTotal1" id="sectotal1" value="" maxlength="15" size="15" class="textbox"><BR>
<TR><TD><B>2's:&nbsp;&nbsp;</B><input type="text" name="SecTotal2" id="sectotal2" value="" maxlength="15" size="15" class="textbox"><BR>
<TR><TD><B>3's:&nbsp;&nbsp;</B><input type="text" name="SecTotal3" id="sectotal3" value="" maxlength="15" size="15" class="textbox"><BR>
<TR><TD><B>4's:&nbsp;&nbsp;</B><input type="text" name="SecTotal4" id="sectotal4" value="" maxlength="15" size="15" class="textbox"><BR>
</TABLE>
<BR><BR><BR>
<input type="button" name="reset_form" value="Reset Form" onclick="this.form.reset();">
<BR><BR><BR><BR>
</FORM>
</BODY>
</HTML>



I know it should be simple, but I guess it's been too long. Thanks in advance for any help people are willing to give

Old Pedant
07-05-2011, 08:34 PM
Well, you need to start by producing legal HTML.


<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';" onMouseOut="this.bgColor='#FFFFFF';">
<TD><input name="sec11" value="1" type="radio">&nbsp;&nbsp;1
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#B7EDFF';"
...

You have no closing tag on your <TD>. You have no closing tag on your <TR>.

Old Pedant
07-05-2011, 09:01 PM
Try this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Communication Styles</title>

<style type="text/css">
tr.question td { font-weight: bold; text-decoration: underline; }
tr.answer td { background-color: white; }
tr.answer td:hover { background-color: #B7EDFF; }
tr.result td { font-weight: bold; }
tr.result td { width: 40px; }
</style>

<script type="text/javascript">
//<![CDATA[

function recalc( )
{
var counts = [0,0,0,0,0];
var inps = document.getElementsByTagName("input");
for ( var i = 0; i < inps.length; ++i )
{
var inp = inps[i];
if ( inp.type == "radio" )
{
if ( inp.checked )
{
var val = parseInt(inp.value);
++counts[val];
}
}
}
for ( var a = 1; a <= 4; ++a )
{
document.forms[0]["total"+a].value = counts[a];
}
}


function initAll( )
{
var inps = document.getElementsByTagName("input");
for ( var i = 0; i < inps.length; ++i )
{
var inp = inps[i];
if ( inp.type == "radio" )
{
inp.onclick = recalc;
}
}
}


window.onload = initAll;

//]]>
</script>
</head>
<body>
<br/><br/>
<center><h1><u>Communication Styles</u></h1></center>
<br/><br/>
<form action="" method="get" onsubmit="return false;">
<table>
<tr class="question">
<td colspan="4">1. Do you tire more easily? Feel fatigued rather than energetic?</td>
</tr>
<tr class="answer">
<td><label><input name="sec11" type="radio" value="1"/>&nbsp;&nbsp;1</label></td>
<td><label><input name="sec11" type="radio" value="2"/>&nbsp;&nbsp;2</label></td>
<td><label><input name="sec11" type="radio" value="3"/>&nbsp;&nbsp;3</label></td>
<td><label><input name="sec11" type="radio" value="4"/>&nbsp;&nbsp;4</label></td>
</tr>
<tr class="question">
<td colspan="4">2. Are you annoyed by people telling you that you don't look so good lately?</td>
</tr>
<tr class="answer">
<td><label><input name="sec12" type="radio" value="1"/>&nbsp;&nbsp;1</label></td>
<td><label><input name="sec12" type="radio" value="2"/>&nbsp;&nbsp;2</label></td>
<td><label><input name="sec12" type="radio" value="3"/>&nbsp;&nbsp;3</label></td>
<td><label><input name="sec12" type="radio" value="4"/>&nbsp;&nbsp;4</label></td>
</tr>
<tr class="question">
<td colspan="4">3. Are you working harder and harder and accomplishing less and less?</td>
</tr>
<tr class="answer">
<td><label><input name="sec13" type="radio" value="1"/>&nbsp;&nbsp;1</label></td>
<td><label><input name="sec13" type="radio" value="2"/>&nbsp;&nbsp;2</label></td>
<td><label><input name="sec13" type="radio" value="3"/>&nbsp;&nbsp;3</label></td>
<td><label><input name="sec13" type="radio" value="4"/>&nbsp;&nbsp;4</label></td>
</tr>
<tr>
<td colspan="4"><hr/></td>
</tr>
<tr class="results">
<td>1's:&nbsp;&nbsp;<input name="total1" readonly="readonly"/></td>
<td>2's:&nbsp;&nbsp;<input name="total2" readonly="readonly"/></td>
<td>3's:&nbsp;&nbsp;<input name="total3" readonly="readonly"/></td>
<td>4's:&nbsp;&nbsp;<input name="total4" readonly="readonly"/></td>
</tr>
</table>
</form>
</body>
</html>


Yes, it even passes the W3C validator.

Darkslide632
07-06-2011, 03:55 AM
Thanks. It's definitely put together a lot different than my other stuff (read as: looks like it was put together by someone who knows what they're doing), and seems to be working the way I want it too.

Much appreciated. I'll get back to hacking my way through stuff.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum