Javascript get values of multiple text fields

Question

I have a dynamic web page where the content may contain between 1 and 10 links, provided in text boxes, similar to the following:

<input size="50" id="link" value="http://Something.Something" type="text">
<input size="50" id="link" value="http://SomethingElse.Something" type="text">

I need javascript to be able to read all of the links, and be able to manipulate the data (store in array, output to screen, etc)

I know that I can read a single id using the following

var link = document.getElementById('link');

Which will return the first match - but, how can I do a loop or obtain all the values for all the links, bearing in mind that the number of links cannot be determined beforehand?

P.S. I have tried using getElementsByTagName('input') but there are more inputs on the page, which means it's getting more results than I'd like it to get.

Id must be unigue. You cant have multiple items with the same Id — laaposto
– laaposto, Commented Feb 3, 2014 at 10:19
if its possible for you add a common class to all the inputs where you will file links and then fetch all elements with that class name as stackoverflow.com/questions/1933602/… — Harshada Chavan
– Harshada Chavan, Commented Feb 3, 2014 at 10:22

TheOneWhoPrograms · Accepted Answer · 2014-02-03 10:21:01Z

5

You can make them all have names and search by name.

<input name="vrow" value="0" type="text"/>
<input name="vrow" value="0" type="text"/>
<input name="vrow" value="0" type="text"/>
<input name="vrow" value="0" type="text"/>

Then you can get it with:

var vrows = document.getElementsByName("vrow");
alert(vrows.length);

answered Feb 3, 2014 at 10:21

TheOneWhoPrograms

6691 gold badge8 silver badges19 bronze badges

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

1 Comment

KeyszerS Over a year ago

Thank you, I like and have used this solution :)

n_n · Accepted Answer · 2014-02-03 10:21:05Z

1

Give them all a common class and access using document.getElementsByClassName('class').

answered Feb 3, 2014 at 10:21

n_n

1418 bronze badges

Comments

acarlon · Accepted Answer · 2014-02-03 10:21:06Z

1

IDs should be unique for each element. You could use document.getElementsByClassName or document.querySelectorAll(".class"); and then use the class name (assuming relatively modern browser). Or use document.getElementsByTagName() and then iterate through the elements comparing with the class.

answered Feb 3, 2014 at 10:21

acarlon

17.4k7 gold badges79 silver badges98 bronze badges

Comments

ArVan · Accepted Answer · 2014-02-03 10:23:43Z

0

Attach a jQuery lib and you will be able to do something like:

$('input[type=text]').each(function(i, val){
    alert($(this).val());
});

answered Feb 3, 2014 at 10:23

ArVan

4,2659 gold badges38 silver badges58 bronze badges

Collectives™ on Stack Overflow

Javascript get values of multiple text fields

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related