Help with using variables in document within for loop

[lmtoe]

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:

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

<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...

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:

one = document.autoSumForm.projA+(x).value;

or like this:

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:

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!

[Logic Ali]

document.autoSumForm[ 'projA' + x ].value;

[007Julien]

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

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);
	}

[hyperionXS]

Remove onfocus and onblur events. You don't need those. Instead, use onchange.

Here is your working 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

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>

[lmtoe]

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:

<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

[Gray1989]

<TD><INPUT TYPE=TEXT NAME="total1" readOnly></TD>