ansaurus

Question

Javascript: Get all elements with id id[x]

Answer 1

+5 A:

[] are not valid characters in ID attributes. You should use the name attribute (without the numeric indexes), and then use getElementsByName():

<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"/>

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

Note that IE and Opera may return elements with id attributes that have the same value as the name specified in getElementsByName(). IE may also return non-input elements with a name attribute that has the same value.

Andy E 2010-09-15 12:29:56

FWIW, getElementsByName() isn't supported in IE or Opera. Or rather, it's supported, but not correctly: http://www.quirksmode.org/dom/w3c_core.html

Robusto 2010-09-15 12:39:40

thank you. basics matter.

abel 2010-09-15 12:42:09

@Robusto: Provided you look out for those issues, there shouldn't be any problems. Updated my answer to reflect that.

Andy E 2010-09-15 12:48:43

Answer 2

+1 A:

var inputTags = document.getElementsByTagName('INPUT');
var count=0;
for(var i=0;i<inputTags.length;i++)
if(inputTags[i].id.contains('vrow[')
count++;

Vinay B R 2010-09-15 12:30:50

interesting. but i get a Object does not support this property or method.

abel 2010-09-15 12:37:05

Answer 3

A:

getElementById always returns one element (since id are unique). getElementsByName can result a list of elements.

<html>
<head>
 <script>
  function getElements() {
   var elements = document.getElementsByName("vrow[]");
   alert(elements.length);
  }
 </script>
</head>
<body onload="getElements()">
<input name="vrow[]" id="vrow_0" value="0" type="text"/>
<input name="vrow[]" id="vrow_1" value="0" type="text"/>
<input name="vrow[]" id="vrow_2" value="0" type="text"/>
<input name="vrow[]" id="vrow_3" value="0" type="text"/>
</body>
</html>

Mark Baijens 2010-09-15 12:32:17

Answer 4

A:

If you use a JavaScript library with a query function supporting CSS3, such as Prototype, you can use the attribute starts-with selector to find id attributes beginning with vrow[

So in Prototype this would be

$$('input[id^=vrow[]').each

NB this is untested, you might have to escape the [ in the selector

Prototype $$ function

Mark Chorley 2010-09-15 12:38:29

ansaurus

tags:

views:

answers:

Javascript: Get all elements with id id[x]

related questions