Its like when i go to Section 11 my radio button id become
sec111
sec112
sec113
sec114
and what ever value is selected in that it gets added to my SecTotal1
rather than SecTotal11…
and the script wouldnt add after Section4:injured:
Currently we’re using this:
section = field.name.substring(3,4);
So what other ways could we use. We you use different techniques based on the string width, or we could approach the problem in some other way. Perhaps by approaching t as a number?
We can use substring(3) to get the 114, and we can then divide by 10 and take the integer with parseInt(114 / 10) to end up with 11, which will work across all of them.
Replacing the above line of code with this should do the trick:
section = parseInt(field.name.substring(3) / 10);
Edit:
This is the wrong approach. The next post shows the right approach
No, that’s the wrong approach. Let’s take the other path that was rejected at an earlier stage.
The technique that’s based on the string width is:
section = field.name.substring(3, field.name.length - 1);
which is a much more appropriate technique than in the previous post.
Thank you for being so patient with me man! You’re truly knowledgeable
I Changed the bit u suggested but it still is not working rather SecTotal1 is also not working, I must be going wrong somewhere.
Heres the code
<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: left;
width: 729px;
}
</style>
</head>
<body>
<form id="analysis" action="index.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. Curved Spine, Height loss, stooped base of neck hump (dowager's hump)</td>
<td><input name="Curved_Spine_Height_loss_stooped_base_of_neck_hump" id="sec11" value="0" type="radio"></td>
<td><input name="Curved_Spine_Height_loss_stooped_base_of_neck_hump" id="sec11" value="2" type="radio"></td>
<td><input name="Curved_Spine_Height_loss_stooped_base_of_neck_hump" id="sec11" value="5" type="radio"></td>
<td><input name="Curved_Spine_Height_loss_stooped_base_of_neck_hump" id="sec11" value="10" type="radio"></td>
</tr>
<tr class="question">
<td class="section">2. Bone pain, back, hip or knee pain</td>
<td><input name="Bone_pain_back_hip_or_knee_pain" id="sec12" value="0" type="radio"></td>
<td><input name="Bone_pain_back_hip_or_knee_pain" id="sec12" value="2" type="radio"></td>
<td><input name="Bone_pain_back_hip_or_knee_pain" id="sec12" value="5" type="radio"></td>
<td><input name="Bone_pain_back_hip_or_knee_pain" id="sec12" value="10" type="radio"></td>
</tr>
<tr class="question">
<td class="section">3. Spinal problems, pain, Sciatic pain</td>
<td><input name="Spinal_problems_pain_Sciatic_pain" id="sec13" value="0" type="radio"></td>
<td><input name="Spinal_problems_pain_Sciatic_pain" id="sec13" value="2" type="radio"></td>
<td><input name="Spinal_problems_pain_Sciatic_pain" id="sec13" value="5" type="radio"></td>
<td><input name="Spinal_problems_pain_Sciatic_pain" id="sec13" value="10" type="radio"></td>
</tr>
<td><input type="textbox" name="SecTotal1" id="SecTotal1"class="textbox">
</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 10</th>
<td>A</td><td>B</td><td>C</td><td>D</td>
</tr>
<tr class="question">
<td class="section">1. sec101</td>
<td><input type="radio" name="sec101" name="sec101" value="0"></td>
<td><input type="radio" name="sec101" name="sec101" value="2"></td>
<td><input type="radio" name="sec101" name="sec101" value="5"></td>
<td><input type="radio" name="sec101" name="sec101" value="10"></td>
</tr>
<tr class="question">
<td class="section">2. sec102</td>
<td><input type="radio" name="sec102" name="sec102" value="0"></td>
<td><input type="radio" name="sec102" name="sec102" value="2"></td>
<td><input type="radio" name="sec102" name="sec102" value="5"></td>
<td><input type="radio" name="sec102" name="sec102" value="10"></td>
<tr class="question">
<td class="section">3. sec103</td>
<td><input type="radio" name="sec103" name="sec103" value="0"></td>
<td><input type="radio" name="sec103" name="sec103" value="2"></td>
<td><input type="radio" name="sec103" name="sec103" value="5"></td>
<td><input type="radio" name="sec103" name="sec103" value="10"></td>
</tr>
<tr>
<td><input type="textbox" name="SecTotal10" id="SecTotal10"class="textbox">
</tr>
</table>
<div>
<input type="submit" id="createcsv" name="createcsv">
</div>
</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, field.name.length - 1);
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>
I Figured out a mistake i was making i copied and used name instead of id have changed that so its working for Sec1 but Sec11 is still in the dark 
<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.id.substring(3, field.id.length - 1);
sectionTotal[section] = (sectionTotal[section] || 0) + Number(field.value);
}
}
for (i = 1; i < sectionTotal.length; i += 1) {
form.elements['SecTotal' + i].value = sectionTotal[i];
}
}
</script>
if you like, look at the code in post 11.
the logic there might help fix your problem.
Oh yes, a silly issue.
My test code still uses the original name and id attributes, which are the same.
You’ll be wanting to use the id attribute instead.
section = field.id.substring(3, field.id.length - 1);
More over the problem increases when i go to section1 Question 11 as my id becomes sec111 do u suggest i change my id names to something else?
No.
Look at the script and break it down.
section = field.id.substring(3, field.id.length - 1);
field.id is ‘sec111’
The length is 6
‘sec111’.substring(3, 5) is 11
So that code should work properly.
I have posted the page am working on at http://postyouremail.com/final2/index.html
If u chk it out it does not add Question 10 and onwards
and Section 10 and onwards
Get the HTML fixed up and try again.
For example, I’m seeing:
<input type="textbox" name="SecaTotal10" id="secatotal10"
SecaTotal10 should be SecTotal10
Sir i made the changes but still no luck if u see Section1 the form is not adding question 10 11 and 12 either
After that you’ll find that Sections 13, and 15 on up to 28 onwards have capitalisation problem with the SecTotal name.
Only after all of that, do we come through to the next problem, where there are 10 or more sets of questions in section 13.
The id is “sec1310”
What is the poor code supposed to do? It can’t handle this, and it shouldn’t. Instead, the formatting of the id needs to change, or the code needs to change.
I’m going to work on an update where the section number is retrieved instead from the first row of the table.
i have changed all the sectotal to SecTotal
but the output remains blank…
I also notice that Section 1 Question 1’s id (sec111)
clashes with Section 11 Question 1’s id (sec111)
I think we would have to change the ids… but cant figure out to what…
Any suggestions ?
Good, you are noticing the “growing pains” issue too.
See above.
LOL yes its painstaking 
It’s called troubleshooting, or debugging, and is a major part of all programming that ever occurs anywhere.
Okay, a new plan for the sections, since we cannot continue on with placing them in the id attributes.
This is also a good time to note that every single id attribute must be unique. How you were using them is not allowed.
Every section starts as follows:
<table width="70%">
<h5><strong>A=Never B=Mild (twice a week or Less) C=Moderate (3 - 6 times a week) D=Severe (daily Symptoms)</strong></h5>
<tr>
<th align="left">SECTION 1</th>
</tr>
...
What we’re going to do sounds simple, but requires using some here-to-fore unused DOM traversal.
We’re going to walk up the tree until we get to the <table> element, take the first <th> element, and from “SECTION 12” we’re going to return that number.
function getSectionNumber(el) {
var table, th, text, section;
table = el;
while (table.nodeName !== 'TABLE' && table.nodeName !== 'BODY') {
table = table.parentNode;
}
th = table.getElementsByTagName('th')[0];
text = th.firstChild.nodeValue;
return Number(/\\d+/.exec(text)[0]);
}
The code also includes a sanity check for the <body> element, just in its given an element that’s not inside a table.
Just to explain the last part, /\d+/ is a regular expression that looks for one or more numbers. When that regular expression is run on “Section 12” it returns an array with [“12”] so we retrieve the value at index 0, to get what we want.
You should then be able to update the appropriate line of javascript to:
section = getSectionNumber(field);
which should resolve that whole problem.
Then, you can remove all of those useless and actually illegal id attributes from the form fields.
Concerning the “undefined” that’s seen, a small tweak to this resolves that issue.
form.elements['SecTotal' + i].value = sectionTotal[i] || 0;
without intending to confuse you, another option is
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
inpHid[i].value = total;
}
//now that we have all section total, submit the form
document.getElementById('analysis').submit();
}
getElementsByClassName() is in post 11.
but learning how to debug is a very handy skill to acquire.
think of it as character building
Inculcated the changes and it works!! Too good !! Thanx a ton… you guys are geniuses… I wish to have knowledge as yours
<script type="text/javascript">
function getSectionNumber(el) {
var table, th, text, section;
table = el;
while (table.nodeName !== 'TABLE' && table.nodeName !== 'BODY') {
table = table.parentNode;
}
th = table.getElementsByTagName('th')[0];
text = th.firstChild.nodeValue;
return Number(/\\d+/.exec(text)[0]);
}
</script>
<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 = getSectionNumber(field);
sectionTotal[section] = (sectionTotal[section] || 0) + Number(field.value);
}
}
for (i = 1; i < sectionTotal.length; i += 1) {
form.elements['SecTotal' + i].value = sectionTotal[i] || 0;
}
}
</script>