Make a for-loop from 22 document.form.value statements

Posted on 2004-11-23
Last Modified: 2007-12-19
I am close -- but no cigar.   I have a series of 22 forms that save input values (scores) and then pass to one "super" form that then sends to a response page.  How do I write these statements in a more compact for-loop?   Writing in Javascript document.write statements is cumbersome, but sometimes necesary since this will involve making these into either an array or variables .

function final_results() {
         // assigns values to the final input value <--- from each of 22 forms values
        document.results_form.finalTotal1.value =;
      document.results_form.finalTotal2.value =;
      document.results_form.finalTotal3.value =;
      document.results_form.finalTotal4.value =;
      document.results_form.finalTotal5.value =;
      document.results_form.finalTotal6.value =;
      document.results_form.finalTotal7.value =;
      document.results_form.finalTotal8.value =;
      document.results_form.finalTotal9.value =;
      document.results_form.finalTotal10.value =;
      document.results_form.finalTotal11.value =;
      document.results_form.finalTotal12.value =;
      document.results_form.finalTotal13.value =;
      document.results_form.finalTotal14.value =;
      document.results_form.finalTotal15.value =;
      document.results_form.finalTotal16.value =;
      document.results_form.finalTotal17.value =;
      document.results_form.finalTotal18.value =;
      document.results_form.finalTotal19.value =;
      document.results_form.finalTotal20.value =;
      document.results_form.finalTotal21.value =;
      document.results_form.finalTotal22.value =;
      return document.results_form.finalTotal1.value;    
      return document.results_form.finalTotal2.value;    
      return document.results_form.finalTotal3.value;    
      return document.results_form.finalTotal4.value;    
      return document.results_form.finalTotal5.value;    
      return document.results_form.finalTotal6.value;    
        return document.results_form.finalTotal7.value;    
      return document.results_form.finalTotal8.value;    
      return document.results_form.finalTotal9.value;    
      return document.results_form.finalTotal10.value;    
        return document.results_form.finalTotal11.value;    
      return document.results_form.finalTotal12.value;    
      return document.results_form.finalTotal13.value;    
      return document.results_form.finalTotal14.value;    
      return document.results_form.finalTotal15.value;    
      return document.results_form.finalTotal16.value;    
      return document.results_form.finalTotal17.value;    
      return document.results_form.finalTotal18.value;    
      return document.results_form.finalTotal19.value;    
      return document.results_form.finalTotal20.value;  
      return document.results_form.finalTotal21.value;    
      return document.results_form.finalTotal22.value;    
      document.results_form.totalscore.value = ????
      return document.results_form.totalscore.value;

The final document.results_form.totalscore.value is a summation value that could be an increment statement or a final addition of all of the above.

Tight, economical code always greatly appreciated.
Question by:bodywise
    LVL 25

    Expert Comment

    I hope I did without errors :)

    in every form add keyword "this" on onsubmit attribute

    like this:
    <form onsubmit="return final_results(this)">

    and the function:

    function final_results(obj)
          // assigns values from the 22 forms into an input of the final super form
                var total=0;
                for(var i=1;i<23;i++)
                      eval("document.results_form.finalTotal"+i+".value =;")
                      return false;
                   document.results_form.totalscore.value = total;
                return true;

    LVL 8

    Accepted Solution


             Not sure of the process, but I think that you are trying to call this function only once ( rather than at the end of each form [ maybe? ] )... Anyway, this will only have to be called once:

    function final_results() {
       var tot = 0
       for ( var i = 0 ; i < 3 ; ++i )
          eval("document.forms['destForm'].finalTotal" + i ).value = document.forms['form'+i].total.value
          tot += parseFloat(document.forms['form'+i].total.value)

       document.forms['destForm'].FINAL.value = tot

    <body onload=final_results()>
    <form name="form0">
    <input type=text name="total" value='2'></input>

    <form name="form1">
    <input type=text name="total" value='4'></input>

    <form name="form2">
    <input type=text name="total" value='6'></input>

    <form name="destForm">
    <input type=text name="finalTotal0">
    <input type=text name="finalTotal1">
    <input type=text name="finalTotal2">

    <input type=text name="FINAL">
    LVL 25

    Expert Comment

    a yeah, one bug I see :);

    should be:*1;

    Author Comment

    Again ... thanks for such a speedy response.  I need to work through this and get back to both of you in a few hours (I am still at work)  ...  I  think this is right.  

    The partial answer is, yes, this is supposed to be a one time call at the end of complete of the 22 forms.   So each of the 22 forms needs to call up an "upTotal"  function that totals the results.  The superform just inputs these total values all at once to post to the response page.

    LVL 8

    Expert Comment

    The example given provides the total in the "FINAL" input box, there is no need call another 'upTotal' function; anyway, see how it goes ;-)
    LVL 14

    Expert Comment

    Hi bodywise,

    Here is the code you have, (basically), in compact form. I do not understand why you need to "return" all of those values, or where you are returning them to. If you can show me more of your code, I could maybe understand.

    Here is the script:

    function final_results(){
             num = i+1;
             var num = num.toString();
             getForm = document.forms['form'+num].total.value;
             document.results_form.elements['finalTotal'+num].value = getForm;
             grand_total += parseInt(getForm);
         document.results_form.totalscore.value = grand_total;

    Are you calling the results from the "final_results()" function from inside another function, or why the "return" statements?

    Anyway, hope that helps.


    Author Comment

    Gee.  Thanks to all of you.   This has been a very short and sweet interchange.  I went with the simplest and most effective solution from aaron, although I think the other suggestions from all of you would work as well.  Eadh teaches me just a slight variation. is another very clever convention that I have not used.

    Here is what I learned that I did not quite understand.

    1. form can be named as forms['form'+i]    most clever and most compact

    2. the part eval("document.forms['destForm'].finalTotal" + i ).value  is what I was looking for.  I could not figure out how to phrase this and the end  == finalTotal" + i ).value ==  was just not apparent to me.  It works!

    3. the increment counter works just right -- I think -- although it is not the absolute critical value.  the 22 total scores are the important variables that are passed to the response page

    4. the <body onload> statement is probably critical to setting up the "re-evaluation" process

    5. I had to change the counter from 0 to 1 since my forms are named as form1, form2 etc and not form0, form1 ...  The 0 array system still confuses me greatly.   I seem to remember that Pascal allows you to change array counting from 0 to 1.  I don't think you have that option in JS so I just put dummmy text in the first array element.

    hope to encounter you again with any remianing problems.bodywise

    here is the rather hidden page that you may need to sign-in to view.
    LVL 8

    Expert Comment

    Great, happy to see that u learnt so much... I am still constantly learning new and improved ways of coding in JScript - its a fairly amazing language ( well I think anyway )


    Author Comment

    Indeed.  I have programmed in TurboPascal, PHP, ASP, a tiny bit of Fortran, Basic, and here comes along Javascript.  Yes, it is a rather amazing scripting language.

    Thank you to all of the above for succinct and relevant answers.

    Happy Turkey Day.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
    Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now