# Thread: Help with using variables in document within for loop

1. Registered User
Join Date
Mar 2012
Posts
2

## Help with using variables in document within for loop

The answer is probably really simple, but have searched around and tried many things, but have not been able to get this working.

The end goal is I need to total the sum of each row in a form.

Let me start with some code that works. Here is the javascript:

Code:
```<script language="JavaScript" type="text/javascript">
<!--

function startCalc(){
interval = setInterval("calc()",1);
}

function calc(){
one = document.autoSumForm.projA1.value;
two = document.autoSumForm.projB1.value;
three = document.autoSumForm.projC1.value;
document.autoSumForm.total1.value = (one * 1) + (two * 1) + (three * 1);
}

function stopCalc(){
clearInterval(interval);
}

//-->
</script>```
And here is the html form:

Code:
```<FORM name="autoSumForm">

<H3>PROJECT TOTALS</H3>

<TABLE BORDER =3>

<TD COLSPAN=5><B>Enter Total Percentage Spent on each Project</B></TD>

<TR>
<TD align="center"><B>Name</B></TD>
<TD ALIGN="CENTER"><B>Project A:</B></TD>
<TD ALIGN="CENTER"><B>Project B:</B></TD>
<TD ALIGN="CENTER"><B>Project C:</B></TD>
<TD align="center"><B>TOTAL</B></TR>

<TR>
<TD>Bob</TD>
<TD><INPUT TYPE=TEXT NAME="projA1" onFocus="startCalc();" onBlur="stopCalc();"></TD>
<TD><INPUT TYPE=TEXT NAME="projB1" onFocus="startCalc();" onBlur="stopCalc();"></TD>
<TD><INPUT TYPE=TEXT NAME="projC1" onFocus="startCalc();" onBlur="stopCalc();"></TD>
<TD><INPUT TYPE=TEXT NAME="total1" onFocus="this.form.elements[0].focus()"></TD>
</TR>
<TR>
<TD>Jane</TD>
<TD><INPUT TYPE=TEXT NAME="projA2" onFocus="startCalc();" onBlur="stopCalc();"></TD>
<TD><INPUT TYPE=TEXT NAME="projB2" onFocus="startCalc();" onBlur="stopCalc();"></TD>
<TD><INPUT TYPE=TEXT NAME="projC2" onFocus="startCalc();" onBlur="stopCalc();"></TD>
<TD><INPUT TYPE=TEXT NAME="total2" onFocus="this.form.elements[0].focus()"></TD>
</TR>

<TR>
<TD><input type="submit" value="Submit"></TD>
</TR>

</TABLE>
<P>

<INPUT TYPE=RESET VALUE="CLEAR FORM">

</FORM>```

The above code works for the first line... the sum of the 3 project is added and is auto-calculated and stored in the Total Column.

So the goal is to to take the above javascript code and stick it in a for loop to generate the same total calculation for each row. Note: The sample form above is just a snippet - in reality it will be 30+ rows long, so repeating the javascript code is not an option and really makes sense to use a for-loop.

Having that said, I am not able to get it working. Working just with html snippet above I have tried changing the javascript calc() function to the following...

Code:
```function calc(){

for (var x=1;x<=2; x++)
{
one = document.autoSumForm.projA[x].value;
two = document.autoSumForm.projB[x].value;
three = document.autoSumForm.projC[x].value;
document.autoSumForm.total[x].value = (one * 1) + (two * 1) + (three * 1);
}
}```

But this doesn't work. I have also tried sticking it in quotes and also using + For example:

Code:
`one = document.autoSumForm.projA+(x).value;`
or like this:

Code:
`one = "'document.autoSumForm.projA'+x+'.value'";`
I've searched quite a bit, and found "similar" things, but seems every example shows the for-loop variable being called in a "document.write" function:

Code:
`document.write("The variable number is " + x);`
Using the variable as a stand-alone value as in the docuemnt.write function above works, but that's not what I want or need. I am looking for how to use the variable as part of the field form name. I know it goes without saying, but any help or direction here would be greatly appreciated. Thanks!

2. Code:
`document.autoSumForm[ 'projA' + x ].value;`

3. Registered User
Join Date
Oct 2010
Location
Versailles, France
Posts
1,290
Why plan a call all the milliseconds? It's a little short ?
Try, at first, simple calls with onchange events ! Then to get each target, use the form with brackets like this

Code:
```for (var x=1;x<=2; x++)
{
one = document.autoSumForm["projA"+i].value;
two = document.autoSumForm["projB"+i].value;
three = document.autoSumForm["projC"+i].value;
document.autoSumForm["total"+i].value = (one * 1) + (two * 1) + (three * 1);
}```

4. Registered User
Join Date
Feb 2012
Posts
218
Remove onfocus and onblur events. You don't need those. Instead, use onchange.

Code:
```<FORM name="autoSumForm">

<H3>PROJECT TOTALS</H3>

<TABLE BORDER =3>

<TD COLSPAN=5><B>Enter Total Percentage Spent on each Project</B></TD>

<TR>
<TD align="center"><B>Name</B></TD>
<TD ALIGN="CENTER"><B>Project A:</B></TD>
<TD ALIGN="CENTER"><B>Project B:</B></TD>
<TD ALIGN="CENTER"><B>Project C:</B></TD>
<TD align="center"><B>TOTAL</B></TR>

<TR>
<TD>Bob</TD>
<TD><INPUT TYPE=TEXT NAME="projA1"></TD>
<TD><INPUT TYPE=TEXT NAME="projB1"></TD>
<TD><INPUT TYPE=TEXT NAME="projC1"></TD>
<TD><INPUT TYPE=TEXT NAME="total1"></TD>
</TR>
<TR>
<TD>Bob</TD>
<TD><INPUT TYPE=TEXT NAME="projA2"></TD>
<TD><INPUT TYPE=TEXT NAME="projB2"></TD>
<TD><INPUT TYPE=TEXT NAME="projC2"></TD>
<TD><INPUT TYPE=TEXT NAME="total2"></TD>
</TR>
<TR>
<TD>Bob</TD>
<TD><INPUT TYPE=TEXT NAME="projA3"></TD>
<TD><INPUT TYPE=TEXT NAME="projB3"></TD>
<TD><INPUT TYPE=TEXT NAME="projC3"></TD>
<TD><INPUT TYPE=TEXT NAME="total3"></TD>
</TR>

<TR>
<TD><input type="submit" value="Submit"></TD>
</TR>

</TABLE>
<P>

<INPUT TYPE=RESET VALUE="CLEAR FORM">

</FORM>

<script language="JavaScript" type="text/javascript">
<!--

var i = 1;
while( document.autoSumForm['projA'+i] ){
document.autoSumForm['projA'+i].onchange = calc;
document.autoSumForm['projB'+i].onchange = calc;
document.autoSumForm['projC'+i].onchange = calc;
i++;
}

function calc(){
var i = 1;
while( document.autoSumForm['projA'+i] ){
document.autoSumForm['total'+i].value =
document.autoSumForm['projA'+i].value * 1+
document.autoSumForm['projB'+i].value * 1+
document.autoSumForm['projC'+i].value * 1
i++;
}
}

//-->
</script>```
This can be optimized by sending calc(i) but I'll leave you handle it.

---- Later edit -----

Here is the optimized JS
Code:
```var i = 1;
while( document.autoSumForm['projA'+i] ){
(function(i){
document.autoSumForm['projA'+i].onchange =
document.autoSumForm['projB'+i].onchange =
document.autoSumForm['projC'+i].onchange = function(){
calc(i);
};
})(i)
i++;
}

function calc(i){
document.autoSumForm['total'+i].value =
document.autoSumForm['projA'+i].value * 1+
document.autoSumForm['projB'+i].value * 1+
document.autoSumForm['projC'+i].value * 1
}

//-->
</script>```
Last edited by hyperionXS; 03-25-2012 at 02:16 PM.

5. Registered User
Join Date
Mar 2012
Posts
2
I see the error in my ways. Many thanks! Yes, using an onChange seems more efficient

However I do still want to keep my "total" values with onFocus so that users can not change/edit the field. Specifically this line from the html form:

Code:
`<TD><INPUT TYPE=TEXT NAME="total1" onFocus="this.form.elements[0].focus()"></TD>`
Having that said, I am all ears if there a better or more efficient way to keep users from editing/changing a field

6. Registered User
Join Date
Mar 2012
Posts
202