www.webdeveloper.com
Results 1 to 6 of 6

Thread: Help with using variables in document within for loop

  1. #1
    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. #2
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Code:
    document.autoSumForm[ 'projA' + x ].value;
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,268
    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. #4
    Join Date
    Feb 2012
    Posts
    218
    Remove onfocus and onblur events. You don't need those. Instead, use onchange.

    Here is your working code
    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. #5
    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. #6
    Join Date
    Mar 2012
    Posts
    202
    <TD><INPUT TYPE=TEXT NAME="total1" readOnly></TD>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles