CODEWITHSUNDEEP
javascripthtmlformsvariables
user1408456
user1408456

Reputation:

Pulling Form Variables through Javascript in a For Loop

I have a webpage that based on user input populates with form fields, as done by the following:

        function Go2() {
            var loans = document.getElementById('count').value;
            var content = document.getElementById('stage3').innerHTML;
            content = '<TABLE Width="100%">'
                +'<TR>'
                +'<TD Style="font-weight:bold;" Width="30%">Customer Name</TD>'
                +'<TD Style="font-weight:bold;" Width="30%">Customer Number</TD>'
                +'<TD Style="font-weight:bold;" Width="30%">Origination Date</TD>'
                +'</TR>'
                +'</TABLE>';
            document.getElementById('stage3').innerHTML = content;
            for(var i=0; i<loans; i++) {
                content = document.getElementById('stage3').innerHTML;
                document.getElementById('stage3').innerHTML = content
                    + '<TABLE Width="100%">'
                    + '<TR>'
                    + '<TD Width="30%"><INPUT Name="CName'
                    + i
                    + '" Size="40" Type="text"></TD>'
                    + '<TD Width="30%"><INPUT Name="CNumber'
                    + i
                    + '" Size="40" Type="text"></TD>'
                    + '<TD Width="30%"><INPUT Name="Date'
                    + i
                    + '" Size="40" Type="text"></TD>'
                    + '</TR>'
                    + '</TABLE>';
            }
            content = document.getElementById('stage3').innerHTML;
            document.getElementById('stage3').innerHTML = content
                    + '<TABLE><TR><TD><INPUT Type="Button" Value="Submit" onClick="Go3()"></TD></TR></TABLE>';
        }

Now what I need to do is iterate through the form and pull out the values for each of the form fields. This is about as far as I've gotten:

for (var n=0; n<loans; n++) {
content += '<TR>'
    + '<TD Colspan="2">'
    + document.getElementById('CName + n').value
    + '</TD>'
    + '<TD Colspan="2">'
    + document.getElementById('CNumber + n').value
    + '</TD>'
    + '<TD>'
    + document.getElementById('Date + n').value
    + '</TD>'
    + '</TR>';
}

Which does...Nothing. The last notable progress I had was getting it to spit out "null" which isn't really progress at all. I've looked at eval, but there's quite a few warnings against it.

Any Ideas?

Upvotes: 0

Views: 717

Answers (3)

RobG
RobG

Reputation: 147403

If all your controls are in a form, then you can access them as:

var allControls = document.<formId>.elements;

or 

var allControls = document.forms[formId].elements;

Then iterate over the list of controls to get the values. The form controls must have names to be successful, no need for IDs. You can also get the values as:

var value = allControls['CName' + n].value;

or just 

var form = docment.forms[formID];
var value = form['CName' + n].value;

Upvotes: 0

gotofritz
gotofritz

Reputation: 3381

Well it should be 'CName' + n - i.e., you got the quotation marks in the wrong place

Upvotes: 1

Josh Mc
Josh Mc

Reputation: 10224

I think you want

document.getElementById('CName' + n).value

(where n is outside of the quotes)

Upvotes: 1

Related Questions