Javascript foreach input in form for Name and Value

Question

I am just practicing some javascript and i used to use JQuery a lot! I have had no major experience with raw javascript and i want to learn it just as i did JQuery. I have a simple form and a javascript function to go with it onsubmit and i want to get the name and value of each input in the form with my function but it doesnt seem to work can someone help me out?

<!DOCTYPE html>
<html>
<head>
    <title>Foreach Practice</title>
    <script type="text/javascript">
        function Get() {
            var Form = document.getElementById('Form');
            for(I = 0; I < Form.length; I++) {
                var Value = this.attribute('name').value;
                alert(Value);
            }
        }
    </script>
</head>
<body>
<form id="Form" onsubmit="return false;">
    <input type="text" name="User" placeholder="Username" />
    <input type="password" name="User" placeholder="Password" />
    <input type="submit" name="Submit" onclick="javascript:Get();" />
</form>
</body>
</html>

RobG · Accepted Answer · 2013-04-08 01:50:48Z

This question is probably better suited to code review, but whatever.

> function Get() {

Variable names starting with a capital letter are, by convention, reserved for constructors. Also, names should indicate what the function does, a generic "get" function doesn't give much of a hint. A better name might be getFormValues.

>     var Form = document.getElementById('Form');

There is a document.forms collection available that can be used as an alternative to calling a method:

    var form = document.forms('Form');

>     for(I = 0; I < Form.length; I++) {

You should always declare variables in an appropriate scope (noting that ECMAScript only has global, function and eval scope, there is no block scope), especially counters. Also, the form's length attribute is the number of controls in the form. Since it's a live collection, getting the length every time when you don't need to is potentially a performance hit, so cache the value:

    for (var i = 0, iLen = form.length; i < iLen; i++) {

>         var Value = this.attribute('name').value;

The value of this is set by how you call a function. If the function is called by a handler, then depending on the browser and method attachment, this will reference the element whose listener called the function. In this case, because the function is called by an inline listener, this has not been set so will default to the global object.

You can easily pass a reference to the element from the listener if you do:

<input ... onclick="getFormValues(this);" ... >

Now your function will receive a reference to the element and can conveniently get a reference to the form and iterate over the controls. Finally, it is rare to need to access a form control's attribute values, you nearly always want to access properties. So here's the re-written function:

function getFormValues(element) {
    var form = element.form;
    var controls = form.controls;

    for (var i=0, iLen=controls.length; i<iLen; i++) {
        alert(controls[i].name + ': ' + controls[i].value);
    }
    // Prevent form submission
    return false;
}

Lastly, you are better to call the listener from the form rather than the submit button, since forms can be submitted by means other than clicking a submit button. Oh, and don't call any form control "submit" or use any name that is the same as a form method as it will overwrite the same–named method. You get away with it here due to capitalisation, but that is not much defense.

The related HTML can be (note that the form now doesn't need either a name or id):

<form onsubmit="return getFormValues();">
    <input type="text" name="userName" placeholder="Username">
    <input type="password" name="userPassword" placeholder="Password">
    <input type="submit" name="submitButton">
</form>

Iswanto San · Accepted Answer · 2013-04-08 01:37:05Z

3

You should iterate to form's children and use getAttribute function to get attribute value.

Try this:

function Get() {
    var Form = document.getElementById('Form');         
    var childs = Form.children;         
    for(I = 0; I < childs.length; I++) {                    
        var Value = childs[I].getAttribute('name');                             
        alert(Value);
    }
}

answered Apr 8, 2013 at 1:37

Iswanto San

18.6k13 gold badges60 silver badges79 bronze badges

1 Comment

RobG Over a year ago

The OP wants the form controls, the children collection will get all element children and is not implemented in all browsers in use. There are many other issues with the code that should be addressed.

Moussa Harajli · Accepted Answer · 2013-04-08 01:39:40Z

2

Anyone looking for the answer to this i figured it ou just by using random attempts of rearranging my code but here it is.

<!DOCTYPE html>
<html>
<head>
    <title>Foreach Tutorial</title>
    <script type="text/javascript">
        function Get() {
            var Form = document.getElementById('Form');
            for(I = 0; I < Form.length; I++) {
                var Name = Form[I].getAttribute('name');
                var Value = Form[I].value;
                alert(Name + ' : ' + Value);
            }
        }
    </script>
</head>
<body>
<form id="Form" onsubmit="return false;">
    <input type="text" name="User" placeholder="Username" />
    <input type="password" name="Pass" placeholder="Password" />
    <input type="submit" name="Submit" onclick="Get();" />
</form>
</body>
</html>

answered Apr 8, 2013 at 1:39

Moussa Harajli

1,5465 gold badges22 silver badges41 bronze badges

1 Comment

RobG Over a year ago

It would be more useful if you were to take advantage of the assistance offered and edit your answer accordingly.

Collectives™ on Stack Overflow

Javascript foreach input in form for Name and Value

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related