Adding Radio Button Values

system · November 15, 2010, 11:09am

Hi I needed some help adding radio button values.

<form name="analysis" id="analysis" action="index2.php" method="POST" onsubmit="return validateme()">

                    <table width="50%">
                            <h5><strong>A=Never B=Mild (twice a week or Less) C=Moderate (3 - 6 times a week) D=Severe (daily Symptoms)</strong></h5>
                                                        <td><b>SECTION 1</b>
                        <td align="right">
                                    &nbsp;&nbsp;&nbsp;A&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;B&nbsp;&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;D&nbsp;&nbsp;
                    <tr class="question">
                        <td>1. sec11
                        <td align="right">
                              &nbsp;<input name="sec11" id="sec11" value="0" onclick="ADD(this.value)" type="radio">
                                    <input name="sec11" id="sec11" value="2" onclick="ADD(this.value)" type="radio">
                                    <input name="sec11" id="sec11" value="5" onclick="ADD(this.value)" type="radio">
                                    <input name="sec11" id="sec11" value="10" onclick="ADD(this.value)" type="radio">
                    <tr class="question">
                        <td>2. sec12
                        <td align="right">
                              &nbsp;<input name="sec12" id="sec12" value="0" onclick="ADD(this.value)" type="radio">
                                    <input name="sec12" id="sec12" value="2" onclick="ADD(this.value)" type="radio">
                                    <input name="sec12" id="sec12" value="5" onclick="ADD(this.value)" type="radio">
                                    <input name="sec12" id="sec12" value="10" onclick="ADD(this.value)" type="radio">
                    <tr class="question">
                        <td>3. sec13
                        <td align="right">
                              &nbsp;<input name="sec13" id="sec13" value="0" onclick="ADD(this.value)" type="radio">
                                    <input name="sec13" id="sec13" value="2" onclick="ADD(this.value)" type="radio">
                                    <input name="sec13" id="sec13" value="5" onclick="ADD(this.value)" type="radio">
                                    <input name="sec13" id="sec13" value="10" onclick="ADD(this.value)" type="radio">
                    <tr>
                        <td>
                        <td align="right"><input type="hidden" name="SecTotal1" id="sectotal1" value="" maxlength="5" size="5" class="textbox">
                                                </table>

                    <table width="50%">
                            <h5><strong>A=Never B=Mild (twice a week or Less) C=Moderate (3 - 6 times a week) D=Severe (daily Symptoms)</strong></h5>
                                                        <td><b>SECTION 2</b>
                        <td align="right">
                                    &nbsp;&nbsp;&nbsp;A&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;B&nbsp;&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;D&nbsp;&nbsp;
                    <tr class="question">
                        <td>4. sec21
                        <td align="right">
                              &nbsp;<input type="radio" name="sec21" id="sec21" value="0" onclick="ADD(this.value)">
                                    <input type="radio" name="sec21" id="sec21" value="2" onclick="ADD(this.value)">
                                    <input type="radio" name="sec21" id="sec21" value="5" onclick="ADD(this.value)">
                                    <input type="radio" name="sec21" id="sec21" value="10" onclick="ADD(this.value)">
                    <tr class="question">
                        <td>5. sec22
                        <td align="right">
                              &nbsp;<input name="sec22" id="sec22" value="0" onclick="ADD(this.value)" type="radio">
                                    <input name="sec22" id="sec22" value="2" onclick="ADD(this.value)" type="radio">
                                    <input name="sec22" id="sec22" value="5" onclick="ADD(this.value)" type="radio">
                                    <input name="sec22" id="sec22" value="10" onclick="ADD(this.value)" type="radio">
                    <tr class="question">
                        <td>5. sec23
                        <td align="right">
                              &nbsp;<input name="sec23" id="sec23" value="0" onclick="ADD(this.value)" type="radio">
                                    <input name="sec23" id="sec23" value="2" onclick="ADD(this.value)" type="radio">
                                    <input name="sec23" id="sec23" value="5" onclick="ADD(this.value)" type="radio">
                                    <input name="sec23" id="sec23" value="10" onclick="ADD(this.value)" type="radio">
                    <tr>
                        <td>
                        <td align="right"><input type="hidden" name="SecTotal2" id="sectotal2" value="" maxlength="5" size="5" class="textbox">
                    </table>
</form>

I tried many javascripts to write ADD functions but couldnt do it,
I want to add the radio button value and store it ni the hidden SecTotal field at the end… any idea how it can be done??

system · November 15, 2010, 11:30am

post the code you have so far for your ADD() and we can try to help you fix it.

system · November 15, 2010, 11:56am

<script type="text/javascript">
function ADD() {
var aObj=document.getElementsByTagName('input');
var total = 0;
var i=aObj.length;
while(i--) {
    if(aObj[i].checked && aObj[i].type=='radio') {total += pareseInt(aObj[i].value);}
    }
document.getElementById('sectotal1').value = total;
}
</script>

am unable to get this to work… i actually have 28 sections with each havin 10 questions and four radio options … have to total the radio button value for each section separately…

system · November 15, 2010, 12:12pm

ok, it’s been a long day but hopefully you can use this demo code for 1 section to help you with your code for multiple sections.

but what do you want done if the user for whatver reason clicks more than 1 radio button in each section.

i’m not sure why you have an onclick on each radio button??
but I’ve done the same in my code in case you have a valid reason

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
 
var totalsA = new Array();
totalsA['sec1'] = 0;
 
function add(sec,val) {
     totalsA[sec] += new Number(val);
    alert(totalsA[sec]);
}
 
</script>
</head>
<body>
 
<div id="radContainer_1">
 <input type="radio" name="rad1" value="1" onclick="add('sec1',this.value)" />1
    <input type="radio" name="rad1" value="2" onclick="add('sec1',this.value)" />2
    <input type="radio" name="rad1" value="3" onclick="add('sec1',this.value)" />3
    <input type="radio" name="rad1" value="4" onclick="add('sec1',this.value)" />4
</div>
 
</body>
</html>

system · November 15, 2010, 12:45pm

Kalon:

ok, it’s been a long day but hopefully you can use this demo code for 1 section to help you with your code for multiple sections.

but what do you want done if the user for whatver reason clicks more than 1 radio button in each section.

i’m not sure why you have an onclick on each radio button??
but I’ve done the same in my code in case you have a valid reason
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
 
var totalsA = new Array();
totalsA['sec1'] = 0;
 
function add(sec,val) {
     totalsA[sec] += new Number(val);
    alert(totalsA[sec]);
}
 
</script>
</head>
<body>
 
<div id="radContainer_1">
 <input type="radio" name="rad1" value="1" onclick="add('sec1',this.value)" />1
    <input type="radio" name="rad1" value="2" onclick="add('sec1',this.value)" />2
    <input type="radio" name="rad1" value="3" onclick="add('sec1',this.value)" />3
    <input type="radio" name="rad1" value="4" onclick="add('sec1',this.value)" />4
</div>
 
</body>
</html>

No specific reasons to do that…
how do i get this to work with radio buttons in different questions…
for example if i had to put this into my html code how should i do that.??

Paul_Wilkins · November 15, 2010, 9:22pm

Wow. It just takes my breath away seeing HTML code like that.

because JavaScript sits on a foundation of HTML code, that should be tidied up first before moving on.

These changes that I’m making will not affect the final code in any way at all.

[list][]Remove useless name attribute on form tag
[]remove inline scripting events
[]Pull h5 tag up out of the table (should be h1 or h2, use CSS to change size)
[]Fix badly broken HTML table structure
[]Remove bold tags and use TH tag instead
[]Remove spaces for formatting, and use table structure instead
[]rearrange attributes
[]plus a whole host of other tweaks[/list]

The end result is that we now have this CSS for the presentation:



#analysis table {
    width: 50%;
}
#analysis th {
    text-align: left;
}
#analysis .section {
    width: 100%;
    text-align: left;
}
#analysis td {
    text-align: center;
}

And this HTML code for the content.



<form id="analysis" action="index2.php" method="POST"> 
    <h5><strong>A=Never B=Mild (twice a week or Less) C=Moderate (3 - 6 times a week) D=Severe (daily Symptoms)</strong></h5>
    <table> 
        <tr>
            <th>SECTION 1</th>
            <td>A</td><td>B</td><td>C</td><td>D</td>
        </tr>
        <tr class="question"> 
            <td class="section">1. sec11</td> 
            <td><input type="radio" name="sec11" value="0"></td>
            <td><input type="radio" name="sec11" value="2"></td>
            <td><input type="radio" name="sec11" value="5"></td>
            <td><input type="radio" name="sec11" value="10"></td>
        </tr>
        <tr class="question"> 
            <td class="section">2. sec12</td>
            <td><input name="sec12" value="0" type="radio"></td>
            <td><input name="sec12" value="2" type="radio"></td>
            <td><input name="sec12" value="5" type="radio"></td>
            <td><input name="sec12" value="10" type="radio"></td>
        <tr class="question"> 
            <td class="section">3. sec13</td>
            <td><input type="radio" name="sec13" value="0"></td>
            <td><input type="radio" name="sec13" value="2"></td>
            <td><input type="radio" name="sec13" value="5"></td>
            <td><input type="radio" name="sec13" value="10"></td>
        </tr>
        <tr> 
            <td><input type="hidden" name="SecTotal1">
        </tr>
    </table> 
    <h5><strong>A=Never B=Mild (twice a week or Less) C=Moderate (3 - 6 times a week) D=Severe (daily Symptoms)</strong></h5>
    <table> 
        <tr>
            <th>SECTION 2</th>
            <td>A</td><td>B</td><td>C</td><td>D</td>
        </tr>
        <tr class="question"> 
            <td class="section">1. sec21</td> 
            <td><input type="radio" name="sec21" value="0"></td>
            <td><input type="radio" name="sec21" value="2"></td>
            <td><input type="radio" name="sec21" value="5"></td>
            <td><input type="radio" name="sec21" value="10"></td>
        </tr>
        <tr class="question"> 
            <td class="section">2. sec22</td>
            <td><input type="radio" name="sec22" value="0"></td>
            <td><input type="radio" name="sec22" value="2"></td>
            <td><input type="radio" name="sec22" value="5"></td>
            <td><input type="radio" name="sec22" value="10"></td>
        <tr class="question"> 
            <td class="section">3. sec23</td>
            <td><input type="radio" name="sec23" value="0"></td>
            <td><input type="radio" name="sec23" value="2"></td>
            <td><input type="radio" name="sec23" value="5"></td>
            <td><input type="radio" name="sec23" value="10"></td>
        </tr>
        <tr> 
            <td><input type="hidden" name="SecTotal2">
        </tr>
    </table> 
</form>

For the scripting, we can use the table structure to automate much of the process. That I’ll work on next.

system · November 15, 2010, 9:27pm

Thanx for replying, I got the script to work in a different way

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<script type="text/javascript">
window.onload=function() {
var aObj=document.getElementsByTagName('input');
var i=aObj.length;
while(i--) {
    if(aObj[i].type=='radio') {aObj[i].onclick = function(){addition(this);};};
    }
}

function addition(obj) {
var idx = obj.name.match(/\\d/);
var tabs = document.getElementsByTagName('table');
var aObj=tabs[idx-1].getElementsByTagName('input');
var total = 0;
var i=aObj.length;
while(i--) {
    if(aObj[i].checked && aObj[i].type=='radio') {total += parseInt(aObj[i].value);}
    }
document.getElementById('sectotal'+idx).value = total;
}
</script>

<style type="text/css">
* {margin:0;padding:0;}
caption {font-weight:bold;}
</style>

</head>
<body>
<form name="analysis" id="analysis" action="data2.php" method="POST" onsubmit="return validateme()">

                    <table width="50%">
                            <caption>A=Never B=Mild (twice a week or Less) C=Moderate (3 - 6 times a week) D=Severe (daily Symptoms)</caption>
                    <tr>
                                                        <td><b>SECTION 1</b>
                        <td align="right">
                                    &nbsp;&nbsp;&nbsp;A&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;B&nbsp;&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;D&nbsp;&nbsp;
                    <tr class="question">
                        <td>1. sec11
                        <td align="right">
                              &nbsp;<input name="sec11" value="0" type="radio">
                                    <input name="sec11" value="2" type="radio">
                                    <input name="sec11" value="5" type="radio">
                                    <input name="sec11" value="10" type="radio">
                    <tr class="question">
                        <td>2. sec12
                        <td align="right">
                              &nbsp;<input name="sec12" value="0" type="radio">
                                    <input name="sec12" value="2" type="radio">
                                    <input name="sec12" value="5" type="radio">
                                    <input name="sec12" value="10" type="radio">
                    <tr class="question">
                        <td>3. sec13
                        <td align="right">
                              &nbsp;<input name="sec13" value="0" type="radio">
                                    <input name="sec13" value="2" type="radio">
                                    <input name="sec13" value="5" type="radio">
                                    <input name="sec13" value="10" type="radio">
                    <tr>
                        <td>
                        <td align="right"><input type="hidden" name="SecTotal1" id="sectotal1" value="" maxlength="5" size="5" class="textbox">
                                                </table>

                    <table width="50%">
                            <caption>A=Never B=Mild (twice a week or Less) C=Moderate (3 - 6 times a week) D=Severe (daily Symptoms)</caption>
                    <tr>
                                                        <td><b>SECTION 2</b>
                        <td align="right">
                                    &nbsp;&nbsp;&nbsp;A&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;B&nbsp;&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;D&nbsp;&nbsp;
                    <tr class="question">
                        <td>4. sec21
                        <td align="right">
                              &nbsp;<input type="radio" name="sec2" value="0">
                                    <input type="radio" name="sec2" value="2">
                                    <input type="radio" name="sec2" value="5">
                                    <input type="radio" name="sec2" value="10">
                    <tr class="question">
                        <td>5. sec22
                        <td align="right">
                              &nbsp;<input name="sec22" value="0" type="radio">
                                    <input name="sec22" value="2" type="radio">
                                    <input name="sec22" value="5" type="radio">
                                    <input name="sec22" value="10" type="radio">
                    <tr class="question">
                        <td>6. sec23
                        <td align="right">
                              &nbsp;<input name="sec23" value="0" type="radio">
                                    <input name="sec23" value="2" type="radio">
                                    <input name="sec23" value="5" type="radio">
                                    <input name="sec23" value="10" type="radio">
                    <tr>
                        <td>
                        <td align="right"><input type="hidden" name="SecTotal2" id="sectotal2" value="" maxlength="5" size="5" class="textbox">
                    </table>

                    <div style="clear:both;">&nbsp;</div>
<div>
<input type="submit" id="createcsv" name="createcsv">
</div>
</form>
</body>
</html>

But i have another problem, Is it possible that somehow we can add the values by Id attribute rather than name ??
because i need to apply the script to my form which looks like this

                    <table width="70%">
                        <tr>
                            <h5><strong>A=Never B=Mild (twice a week or Less) C=Moderate (3 - 6 times a week) D=Severe (daily Symptoms)</strong></h5>
														<td><b>SECTION 1</b>
						<td align="right">
									&nbsp;&nbsp;&nbsp;A&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;B&nbsp;&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;D&nbsp;&nbsp;
					<tr class="question">
                        <td>1. Curved Spine, Height loss, stooped base of neck hump (dowager's hump)
						<td align="right">
									&nbsp;     <input name="Curved_Spine_Height_loss_stooped_base_of_neck_hump" id="sec11" value="0" type="radio">
									<input name="Curved_Spine_Height_loss_stooped_base_of_neck_hump" id="sec11" value="2" type="radio">
									<input name="Curved_Spine_Height_loss_stooped_base_of_neck_hump" id="sec11" value="5" type="radio">
									<input name="Curved_Spine_Height_loss_stooped_base_of_neck_hump" id="sec11" value="10" type="radio">
					<tr class="question">
                        <td>2. Bone pain, back, hip or knee pain
						<td align="right">
									&nbsp;     <input name="Bone_pain_back_hip_or_knee_pain" id="sec12" value="0" type="radio">
									<input name="Bone_pain_back_hip_or_knee_pain" id="sec12" value="2" type="radio">
									<input name="Bone_pain_back_hip_or_knee_pain" id="sec12" value="5" type="radio">
									<input name="Bone_pain_back_hip_or_knee_pain" id="sec12" value="10" type="radio">
					<tr class="question">
                        <td>3. Spinal problems, pain, Sciatic pain
						<td align="right">
									&nbsp;     <input name="Spinal_problems_pain_Sciatic_pain" id="sec13" value="0" type="radio">
									<input name="Spinal_problems_pain_Sciatic_pain" id="sec13" value="2" type="radio">
									<input name="Spinal_problems_pain_Sciatic_pain" id="sec13" value="5" type="radio">
									<input name="Spinal_problems_pain_Sciatic_pain" id="sec13" value="10" type="radio">
					<tr class="question">
                        <td>4. Osteoporosis
						<td align="right">
									&nbsp;     <input type="radio" name="Osteoporosis" id="sec14" value="0" onclick="aggrigate1(this.value)">
									<input type="radio" name="Osteoporosis" id="sec14" value="2" onclick="aggrigate1(this.value)">
									<input type="radio" name="Osteoporosis" id="sec14" value="5" onclick="aggrigate1(this.value)">
									<input type="radio" name="Osteoporosis" id="sec14" value="10" onclick="aggrigate1(this.value)">
					<tr class="question">
                        <td>5. Recent broken bones, fractures
						<td align="right">
									&nbsp;     <input name="Recent_broken_bones_fractures" id="sec15" value="0" type="radio">
									<input name="Recent_broken_bones_fractures" id="sec15" value="2" type="radio">
									<input name="Recent_broken_bones_fractures" id="sec15" value="5" type="radio">
									<input name="Recent_broken_bones_fractures" id="sec15" value="10" type="radio">
					<tr class="question">
                        <td>6. Arthritis - osteo/Rheumatoid Joints swelling, painful, deformity, injury, stiffness
						<td align="right">
									&nbsp;     <input name="Arthritis_osteoRheumatoid_Joints_swelling" id="sec16" value="0" type="radio">
									<input name="Arthritis_osteoRheumatoid_Joints_swelling" id="sec16" value="2" type="radio">
									<input name="Arthritis_osteoRheumatoid_Joints_swelling" id="sec16" value="5" type="radio">
									<input name="Arthritis_osteoRheumatoid_Joints_swelling" id="sec16" value="10" type="radio">
					<tr class="question">
                        <td>7. Noisy joints (creak, grind etc.)
						<td align="right">
									&nbsp;     <input type="radio" name="Noisy_joints_creak_grind_etc" id="sec17" value="0" onclick="aggrigate1(this.value)">
									<input type="radio" name="Noisy_joints_creak_grind_etc" id="sec17" value="1" onclick="aggrigate1(this.value)">
									<input type="radio" name="Noisy_joints_creak_grind_etc" id="sec17" value="3" onclick="aggrigate1(this.value)">
									<input type="radio" name="Noisy_joints_creak_grind_etc" id="sec17" value="5" onclick="aggrigate1(this.value)">
					<tr class="question">
                        <td>8. Nodules on fingers
						<td align="right">
									&nbsp;     <input type="radio" name="Nodules_on_fingers" id="sec18" value="0" onclick="aggrigate1(this.value)">
									<input type="radio" name="Nodules_on_fingers" id="sec18" value="2" onclick="aggrigate1(this.value)">
									<input type="radio" name="Nodules_on_fingers" id="sec18" value="5" onclick="aggrigate1(this.value)">
									<input type="radio" name="Nodules_on_fingers" id="sec18" value="10" onclick="aggrigate1(this.value)">
					<tr class="question">
                        <td>9. High uric acid level
						<td align="right">
									&nbsp;     <input type="radio" name="High_uric_acid_level" id="sec19" value="0" onclick="aggrigate1(this.value)">
									<input type="radio" name="High_uric_acid_level" id="sec19" value="2" onclick="aggrigate1(this.value)">
									<input type="radio" name="High_uric_acid_level" id="sec19" value="5" onclick="aggrigate1(this.value)">
									<input type="radio" name="High_uric_acid_level" id="sec19" value="10" onclick="aggrigate1(this.value)">
					<tr class="question">
                        <td>10. Damaged disc, slipped disc
						<td align="right">
									&nbsp;     <input type="radio" name="Damaged_disc_slipped_disc" id="sec110" value="0" onclick="aggrigate1(this.value)">
									<input type="radio" name="Damaged_disc_slipped_disc" id="sec110" value="2" onclick="aggrigate1(this.value)">
									<input type="radio" name="Damaged_disc_slipped_disc" id="sec110" value="5" onclick="aggrigate1(this.value)">
									<input type="radio" name="Damaged_disc_slipped_disc" id="sec110" value="10" onclick="aggrigate1(this.value)">
					<tr class="question">
                        <td>11. Bursitis or tendonitis
						<td align="right">
									&nbsp;     <input type="radio" name="Bursitis_or_tendonitis" id="sec111" value="0" onclick="aggrigate1(this.value)">
									<input type="radio" name="Bursitis_or_tendonitis" id="sec111" value="1" onclick="aggrigate1(this.value)">
									<input type="radio" name="Bursitis_or_tendonitis" id="sec111" value="3" onclick="aggrigate1(this.value)">
									<input type="radio" name="Bursitis_or_tendonitis" id="sec111" value="5" onclick="aggrigate1(this.value)">
					<tr>
                        <td>
						<td align="right"><input type="textbox" name="SecTotal1" id="sectotal1" value="" maxlength="5" size="5" class="textbox">
				                                                </table>

And with Name attribute it is very difficult

Paul_Wilkins · November 15, 2010, 9:48pm

Whenever the form changes, we want to trigger the process to update the totals.


var form = document.getElementById('analysis');
form.onchange = updateTotals;

The name of the total section is related to the name of the radio button. We should be able to go through all radio buttons of the pattern “secxy” and update “SecTotalx”

First we go through the form collating the totals, where we look for radio buttons that are checked, and add their value to a list of totals.

Because array items are undefined by default, I’ve used a default operator so that any undefined values in the array become zero.

(sectionTotal[section] || 0)


function updateTotals() {
    var form = this,
        sectionTotal = [],
        i,
        field,
        section;
    for (i = 0; i < form.elements.length; i += 1) {
        field = form.elements[i];
        if (field.type === 'radio' && field.checked) {
            section = field.name.substring(3,4);
            sectionTotal[section] = (sectionTotal[section] || 0) + Number(field.value);
            console.log(sectionTotal[section]);
        }
    }
    ...
}

We can then loop through that list of totals, and place them in to their appropriate location within the form:


function updateTotals() {
    ...
    for (i = 1; i < sectionTotal.length; i += 1) {
        form.elements['SecTotal' + i].value = sectionTotal[i];
    }
}

Here’s the demo code of the whole lot in practice.


<html>
<head>
<style type="text/css">
#analysis table {
    width: 50%;
}
#analysis th {
    text-align: left;
}
#analysis .section {
    width: 100%;
    text-align: left;
}
#analysis td {
    text-align: center;
}
</style>
</head>
<body>
<form id="analysis" action="index2.php" method="POST"> 
    <h5><strong>A=Never B=Mild (twice a week or Less) C=Moderate (3 - 6 times a week) D=Severe (daily Symptoms)</strong></h5>
    <table> 
        <tr>
            <th>SECTION 1</th>
            <td>A</td><td>B</td><td>C</td><td>D</td>
        </tr>
        <tr class="question"> 
            <td class="section">1. sec11</td> 
            <td><input type="radio" name="sec11" value="0"></td>
            <td><input type="radio" name="sec11" value="2"></td>
            <td><input type="radio" name="sec11" value="5"></td>
            <td><input type="radio" name="sec11" value="10"></td>
        </tr>
        <tr class="question"> 
            <td class="section">2. sec12</td>
            <td><input name="sec12" value="0" type="radio"></td>
            <td><input name="sec12" value="2" type="radio"></td>
            <td><input name="sec12" value="5" type="radio"></td>
            <td><input name="sec12" value="10" type="radio"></td>
        <tr class="question"> 
            <td class="section">3. sec13</td>
            <td><input type="radio" name="sec13" value="0"></td>
            <td><input type="radio" name="sec13" value="2"></td>
            <td><input type="radio" name="sec13" value="5"></td>
            <td><input type="radio" name="sec13" value="10"></td>
        </tr>
        <tr> 
            <td><input type="hidden" name="SecTotal1">
        </tr>
    </table> 
    <h5><strong>A=Never B=Mild (twice a week or Less) C=Moderate (3 - 6 times a week) D=Severe (daily Symptoms)</strong></h5>
    <table> 
        <tr>
            <th>SECTION 2</th>
            <td>A</td><td>B</td><td>C</td><td>D</td>
        </tr>
        <tr class="question"> 
            <td class="section">1. sec21</td> 
            <td><input type="radio" name="sec21" value="0"></td>
            <td><input type="radio" name="sec21" value="2"></td>
            <td><input type="radio" name="sec21" value="5"></td>
            <td><input type="radio" name="sec21" value="10"></td>
        </tr>
        <tr class="question"> 
            <td class="section">2. sec22</td>
            <td><input type="radio" name="sec22" value="0"></td>
            <td><input type="radio" name="sec22" value="2"></td>
            <td><input type="radio" name="sec22" value="5"></td>
            <td><input type="radio" name="sec22" value="10"></td>
        <tr class="question"> 
            <td class="section">3. sec23</td>
            <td><input type="radio" name="sec23" value="0"></td>
            <td><input type="radio" name="sec23" value="2"></td>
            <td><input type="radio" name="sec23" value="5"></td>
            <td><input type="radio" name="sec23" value="10"></td>
        </tr>
        <tr> 
            <td><input type="hidden" name="SecTotal2">
        </tr>
    </table> 
</form>
<script type="text/javascript">
var form = document.getElementById('analysis');
form.onchange = updateTotal;

function updateTotal(evt) {
    var form = this,
        sectionTotal = [],
        i,
        field,
        section;
    for (i = 0; i < form.elements.length; i += 1) {
        field = form.elements[i];
        if (field.type === 'radio' && field.checked) {
            section = field.name.substring(3,4);
            sectionTotal[section] = (sectionTotal[section] || 0) + Number(field.value);
        }
    }
    for (i = 1; i < sectionTotal.length; i += 1) {
        form.elements['SecTotal' + i].value = sectionTotal[i];
    }
}
</script>
</body>
</html>

Paul_Wilkins · November 15, 2010, 9:50pm

Yes it is possible.

With the more robust code that I used before, you can just change:
field.name.substring(3,4)
to instead be
field.id.substring(3,4)

system · November 15, 2010, 10:34pm

I did it this way.

using pmw57’s html, you can add as many questions and radio buttons as you like to as many sections as you like in the html and the javascript should automatically calculate the totals for each section

for demo purposes I changed the hidden input to a text input so you can see the totals for each section

I also added a 'Calculate totals" button

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#analysis table {
    width: 50%;
}
#analysis th {
    text-align: left;
}
#analysis .section {
    width: 100%;
    text-align: left;
}
#analysis td {
    text-align: center;
}
</style>
<script type="text/javascript">
 
//this is just a helper function to get elements by class name
function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\\-/g, "\\\\-");
    var oRegExp = new RegExp("(^|\\\\s)" + strClassName + "([\\\\s|$](file:///s:$))");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
        oElement = arrElements[i];
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}
//---------------------------------------------
 
function calcTotals() {
    //get the tables
    var tableO = document.getElementsByTagName('table');
    //now process each table
    for(var i=0; i < tableO.length; i++) {
        //get the rows with questions for this table
        var rowsO = getElementsByClassName(tableO[i], 'tr', 'question');
        //now add the values of the checked radio buttons for this table
        var total = 0;
        for(var j=0; j < rowsO.length; j++) {
            var inpO = rowsO[j].getElementsByTagName('input');
            for(k=0; k < inpO.length; k++) {
                if(inpO[k].checked) {
                 total += new Number(inpO[k].value);
             }
         }
        }
 
        //now that we have the total for each section, 
        //output the result to the hidden input
        //first get the hidden input - not hidden for debugging
        var inpHid = document.getElementsByName('sectotal');
        inpHid[i].value = total;   
    } 
} 
</script>
</head>
<body>
<form id="analysis" action="index2.php" method="POST"> 
    <h5><strong>A=Never B=Mild (twice a week or Less) C=Moderate (3 - 6 times a week) D=Severe (daily Symptoms)</strong></h5>
    <table> 
        <tr>
            <th>SECTION 1</th>
            <td>A</td><td>B</td><td>C</td><td>D</td>
        </tr>
        <tr class="question"> 
            <td class="section">1. sec11</td> 
            <td><input type="radio" name="sec11" value="0"></td>
            <td><input type="radio" name="sec11" value="2"></td>
            <td><input type="radio" name="sec11" value="5"></td>
            <td><input type="radio" name="sec11" value="10"></td>
        </tr>
        <tr class="question"> 
            <td class="section">2. sec12</td>
            <td><input name="sec12" value="0" type="radio"></td>
            <td><input name="sec12" value="2" type="radio"></td>
            <td><input name="sec12" value="5" type="radio"></td>
            <td><input name="sec12" value="10" type="radio"></td>
        <tr class="question"> 
            <td class="section">3. sec13</td>
            <td><input type="radio" name="sec13" value="0"></td>
            <td><input type="radio" name="sec13" value="2"></td>
            <td><input type="radio" name="sec13" value="5"></td>
            <td><input type="radio" name="sec13" value="10"></td>
        </tr>
        <tr> 
            <td><input type="text" name="sectotal" /></td>
        </tr>
    </table> 
    <h5><strong>A=Never B=Mild (twice a week or Less) C=Moderate (3 - 6 times a week) D=Severe (daily Symptoms)</strong></h5>
    <table> 
        <tr>
            <th>SECTION 2</th>
            <td>A</td><td>B</td><td>C</td><td>D</td>
        </tr>
        <tr class="question"> 
            <td class="section">1. sec21</td> 
            <td><input type="radio" name="sec21" value="0"></td>
            <td><input type="radio" name="sec21" value="2"></td>
            <td><input type="radio" name="sec21" value="5"></td>
            <td><input type="radio" name="sec21" value="10"></td>
        </tr>
        <tr class="question"> 
            <td class="section">2. sec22</td>
            <td><input type="radio" name="sec22" value="0"></td>
            <td><input type="radio" name="sec22" value="2"></td>
            <td><input type="radio" name="sec22" value="5"></td>
            <td><input type="radio" name="sec22" value="10"></td>
        <tr class="question"> 
            <td class="section">3. sec23</td>
            <td><input type="radio" name="sec23" value="0"></td>
            <td><input type="radio" name="sec23" value="2"></td>
            <td><input type="radio" name="sec23" value="5"></td>
            <td><input type="radio" name="sec23" value="10"></td>
        </tr>
        <tr> 
            <td><input type="text" name="sectotal" /></td>
        </tr>
    </table> 
    <div>
     <input type="button" onclick="calcTotals();" value="Calculate totals" />
    </div>
</form>
</body>
</html>

system · November 16, 2010, 1:54am

i’ve tidied this up a bit so that the results for each section are put into a hidden input, like you had originally, and then actually submitted to a form processing script called formProcessor.php

i’ve added an extra option E to 1 question to make sure you can add extra questions and sections without having to alter the javascript.

i’ve also added a couple of missing </tr> tags.

anyway, this all works now according to my understanding of what you needed.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            #analysis table {
                width: 50%;
            }
            #analysis th {
                text-align: left;
            }
            #analysis .section {
                width: 100%;
                text-align: left;
            }
            #analysis td {
                text-align: center;
            }
        </style>
        <script type="text/javascript">
            function getElementsByClassName(oElm, strTagName, strClassName){
                var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
                var arrReturnElements = new Array();
                strClassName = strClassName.replace(/\\-/g, "\\\\-");
                var oRegExp = new RegExp("(^|\\\\s)" + strClassName + "([\\\\s|$](file:///s:$))");
                var oElement;
                for(var i=0; i<arrElements.length; i++){
                    oElement = arrElements[i];
                    if(oRegExp.test(oElement.className)){
                        arrReturnElements.push(oElement);
                    }
                }
                return (arrReturnElements)
            }
            //---------------------------------------------
 
            function calcTotals() {
                //get the tables
                var tableO = document.getElementsByTagName('table');
                //get the results hidden elements
                var inpHid = document.getElementsByName('sectotal[]');
                //now process each table
                for(var i=0; i < tableO.length; i++) {
                    //get the rows with questions for this table
                    var rowsO = getElementsByClassName(tableO[i], 'tr', 'question');
                    //now add the values of the checked radio buttons for this table
                    var total = 0;
                    for(var j=0; j < rowsO.length; j++) {
                        var inpO = rowsO[j].getElementsByTagName('input');
                        for(k=0; k < inpO.length; k++) {
                            if(inpO[k].checked) {
                                total += new Number(inpO[k].value);
                                k = inpO.length; //jump out of this loop
                            }
                        }
                    }
 
                    //now that we have the total for each section,
                    //output the result to the hidden input
                    //first get the hidden input - not hidden for debugging
                    inpHid[i].value = total;
                }
                document.getElementById('analysis').submit();
            }
 
        </script>
    </head>
    <body>
        <form id="analysis" action="formProcessor.php" method="post">
            <h5><strong>A=Never B=Mild (twice a week or Less) C=Moderate (3 - 6 times a week) D=Severe (daily Symptoms)</strong></h5>
            <table>
                <tr>
                    <th>SECTION 1</th>
                    <td>A</td><td>B</td><td>C</td><td>D</td><td>E</td>
                </tr>
                <tr class="question">
                    <td class="section">1. sec11</td>
                    <td><input type="radio" name="sec11" value="0"/></td>
                    <td><input type="radio" name="sec11" value="2"/></td>
                    <td><input type="radio" name="sec11" value="5"/></td>
                    <td><input type="radio" name="sec11" value="10"/></td>
                    <td><input type="radio" name="sec11" value="15"/></td>
                </tr>
                <tr class="question">
                    <td class="section">2. sec12</td>
                    <td><input name="sec12" value="0" type="radio"/></td>
                    <td><input name="sec12" value="2" type="radio"/></td>
                    <td><input name="sec12" value="5" type="radio"/></td>
                    <td><input name="sec12" value="10" type="radio"/></td>
                </tr>
                <tr class="question">
                    <td class="section">3. sec13</td>
                    <td><input type="radio" name="sec13" value="0"/></td>
                    <td><input type="radio" name="sec13" value="2"/></td>
                    <td><input type="radio" name="sec13" value="5"/></td>
                    <td><input type="radio" name="sec13" value="10"/></td>
                </tr>
                <tr>
                    <td><input type="hidden" name="sectotal[]" /></td>
                </tr>
            </table>
            <h5><strong>A=Never B=Mild (twice a week or Less) C=Moderate (3 - 6 times a week) D=Severe (daily Symptoms)</strong></h5>
            <table>
                <tr>
                    <th>SECTION 2</th>
                    <td>A</td><td>B</td><td>C</td><td>D</td>
                </tr>
                <tr class="question">
                    <td class="section">1. sec21</td>
                    <td><input type="radio" name="sec21" value="0"/></td>
                    <td><input type="radio" name="sec21" value="2"/></td>
                    <td><input type="radio" name="sec21" value="5"/></td>
                    <td><input type="radio" name="sec21" value="10"/></td>
                </tr>
                <tr class="question">
                    <td class="section">2. sec22</td>
                    <td><input type="radio" name="sec22" value="0"/></td>
                    <td><input type="radio" name="sec22" value="2"/></td>
                    <td><input type="radio" name="sec22" value="5"/></td>
                    <td><input type="radio" name="sec22" value="10"/></td>
                </tr>
                <tr class="question">
                    <td class="section">3. sec23</td>
                    <td><input type="radio" name="sec23" value="0"/></td>
                    <td><input type="radio" name="sec23" value="2"/></td>
                    <td><input type="radio" name="sec23" value="5"/></td>
                    <td><input type="radio" name="sec23" value="10"/></td>
                </tr>
                <tr>
                    <td><input type="hidden" name="sectotal[]" /></td>
                </tr>
            </table>
            <div>
                <input type="button" onclick="calcTotals();" value="Calculate totals" />
            </div>
        </form>
    </body>
</html>

formProcessor.php

 
<?php
foreach($_POST['sectotal'] as $value) {
      echo $value.'<br />';
}
?>

Paul_Wilkins · November 16, 2010, 1:57am

Do you think that it’s worth the OP considering what happens when users run their browser without javascript?

system · November 16, 2010, 2:08am

only if his/her client wants him/her to provide content for both javascript and non javascript browsers.

but since the op put their request for help in the javascript thread I am assuming non javascript browsers is not an issue for the op.

personally, I would do all the “number crunching” server side in a “real world” application.

Paul_Wilkins · November 16, 2010, 2:19am

Yep. In general about the only benefit of doing it client-side is if you’re going to display the results on-screen before the form gets submitted. While the client-side is perfectly capable of crunching the numbers, there’s little benefit in duplicating your code across both javascript and php, and for many situations the php processing is more important purely due to the inability to guarantee that javascript will perform the pre-processing for you.

This seems to be a common situation with javascript. The greater the experience, the less you use of it. Until the great and wise zen master doesn’t need to use it at all. At least, I am reminded of a zen-like notion about this, but can’t quite place it.

system · November 16, 2010, 2:32am

my suspicion is this has been an exercise for the OP to practise using javascript.

I have no issue trying to help out since I can see the OP had made a legitimate attempt to code up the javascript but was struggling.

what I posted is just the way I would go about it (using javascript). I’m not saying it’s the only or best way.

Paul_Wilkins · November 16, 2010, 3:05am

What I was trying to pass on is something of an old master understanding.

Brad Appleton says it well where he said:

The “secret” to good software design wasn’t in knowing what to put into the code; it was in knowing what to leave out

system · November 16, 2010, 3:20am

your complete code (post 8) is a little bit shorter than mine but when I first copied and pasted into a text file and ran it, nothing was happening as I was clicking radio buttons.

so I thought either your form.onchange wasn’t working for me or I have missed something. Since looking through your code it wasn’t very intuitive to me exactly what it was doing and where, I decided to write my own code and…voila…!!!

Paul_Wilkins · November 16, 2010, 3:30am

That might have been the console.log statement, which causes trouble with IE. It’s now removed.

It can be easier to see changes when the hidden form values are changed to text instead.

The code consists of three parts.

Assign function to onchange event
Total up radio values
Set the totals to the (normally) hidden fields.

The trickiest part of that code would be this line:


sectionTotal[section] = (sectionTotal[section] || 0) + Number(field.value);

The array value from sectionTotal[section] might be undefined, or it could be a number.
It uses the default operator to default to 0 if that’s the case.

It might be easier to understand as this:


total = sectionTotal[section] || 0; // if undefined, use 0 instead
number = Number(field.value); // convert the field string to a number
sectionTotal[section] = total + number;

system · November 16, 2010, 3:39am

that’s what I did originally as well for debugging purposes. I changed them back to hidden when the form actually submited the data.

that is pretty much what my code does except for part 1 where I have a button instead that does parts 2,3 and then submits the form.

the way I see it, my code does much the same as yours except mine is probably taking “the scenic route” to get there

system · November 16, 2010, 12:53pm

thanx for you input it works fantastic… but when i go to section 11 and onwards its adding the data into SecTotal1 :injured: