Get value of dynamic input element in form object

Question

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/

alert(document.getelementbyid('qty' + i).value);

user3272686
– user3272686

2014-02-14 18:44:38 +00:00
Commented Feb 14, 2014 at 18:44 — user3272686
– user3272686, Commented Feb 14, 2014 at 18:44

Satpal · Accepted Answer · 2022-01-12 08:08:36Z

10

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>

edited Jan 12, 2022 at 8:08

answered Feb 14, 2014 at 18:44

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paulo Lima · Accepted Answer · 2014-02-14 18:46:17Z

3

Simply login as a dictionary

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

 alert(form["qty"+i].value);

answered Feb 14, 2014 at 18:46

Paulo Lima

1,2388 silver badges8 bronze badges

Comments

Suman Bogati · Accepted Answer · 2014-02-14 18:54:20Z

1

Problem is form.qty+i,

To access the element of array you should used index inside the parenthesis.

There is another way to check value of input. Here is one.

  function checkVal(form) {
    var allInputs = document.getElementsByTagName('input');
    for (var i = 0; i < 3; i++) {
          if(allInputs[i].type == 'text'){
                alert(allInputs[i].value);  
          }
    }
}

DEMO

edited Feb 14, 2014 at 18:54

answered Feb 14, 2014 at 18:42

Suman Bogati

6,3612 gold badges25 silver badges38 bronze badges

1 Comment

JesseBoyd Over a year ago

you never use the arg 'form' can remove that

Amit Shah · Accepted Answer · 2017-05-30 08:54:35Z

1

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);
        */
    }
}

answered May 30, 2017 at 8:54

Amit Shah

8,2095 gold badges45 silver badges60 bronze badges

Comments

Krishna M · Accepted Answer · 2014-02-14 18:53:40Z

0

Try this. It works for the above problem

function checkVal(form) {
for (var i = 0; i < 3; i++) {
    alert(document.getElementsByTagName("input")[i].value);
}  }

answered Feb 14, 2014 at 18:53

Krishna M

1,2152 gold badges18 silver badges34 bronze badges

Collectives™ on Stack Overflow

Get value of dynamic input element in form object

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related