Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Totaling multiple radio buttons...

    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?

    Code:
    <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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,103
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    Well, you need to start by producing legal HTML.
    Code:
        <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>.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,103
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    Try this:
    Code:
    <!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.
    Last edited by Old Pedant; 07-05-2011 at 10:04 PM.

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •