Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get value of dynamic input element in form object

My question is: How do I reference a dynamic 'name' of an input element in a form?

For instance, with the following HTML:

<form>
    <input type="text" name="qty1" value="input1" />
     <input type="text" name="qty2" value="input2" />
     <input type="text" name="qty3" value="input3" />

    <input type="submit" value="Submit" onClick="checkVal(this.form); return false;" />
</form>

Javascript:

function checkVal(form) {
    for (var i = 1; i <= 3; i++) {
        alert(form.qty+i.value);  // Here's where my problem is..
    }
}

The above javascript does not work. The alert is outputting NaN.

How do I reference qty1, qty2, and qty3 in a for loop using i variable?

Here's a jsfiddle: http://jsfiddle.net/MRzWf/

like image 632
Bryan Elliott Avatar asked Feb 14 '14 18:02

Bryan Elliott


3 Answers

Use Bracket notation

 form["qty" + i].value

function checkVal(form) {
    for (var i = 1; i <= 3; i++) {
        console.log("qty" + i, form["qty" + i].value);
    }
}
<form>
    <input type="text" name="qty1" value="input1" />
    <br/>
    <input type="text" name="qty2" value="input2" />
    <br/>
    <input type="text" name="qty3" value="input3" />
    <br/>
    <input type="submit" value="Submit" onClick="checkVal(this.form); return false;" />
</form>
like image 173
Satpal Avatar answered Oct 29 '22 12:10

Satpal


Simply login as a dictionary

http://jsfiddle.net/MRzWf/2/

 alert(form["qty"+i].value);
like image 31
Paulo Lima Avatar answered Oct 29 '22 12:10

Paulo Lima


Standard Solution

Using: form.elements[] should work in all browsers..

function checkVal(form) {
    for (var i = 1; i <= 3; i++) {
        alert(form.elements["qty"+i].value);

        /* OR using dynamic name variable
        var ename = "qty"+i;
        alert(form.elements[ename].value);
        */
    }
}
like image 34
Amit Shah Avatar answered Oct 29 '22 13:10

Amit Shah