GetElementsByName with array like name

javascript foreach getelementsbyname
AndreaBogazzi picture AndreaBogazzi · Aug 6, 2013 · Viewed 22k times · Source

i often use this notation when i name my controls in order to get an array in POST or GET.

<input name="color[1]" type="text" />
<input name="color[2]" type="text" />
<input name="color[3]" type="text" />

so in my scripts i can do

<?php $data=$_GET["color"]; 
for each ($color as $key=>$value) {
   doSomething();
} ?>

Often happens that i need to get those id back in javascript , but i cannot get them , so i often add an ID to each element in html like that

<input name="color[3]" id="color_3" type="text" />

so that i can use document.getElementsById('color_3')

Instead i would like to find way to use document.getElementsByName(color[3])... but i cannot really get it to work.

Any help?

Answer

CodingIntrigue picture CodingIntrigue · Aug 6, 2013

If you want all of the color inputs, you can use querySelectorAll instead to query for the name attribute:

document.querySelectorAll("input[name^='color[']")

This looks through the document for all input tags whose name attribute starts with color[. Here is a fiddle for this.

If you only want color[3], you can use:

var color3 = document.getElementsByName("color[3]");
console.log(color3[0]);

Related questions

For-each over an array in JavaScript

How can I loop through all the entries in an array using JavaScript? I thought it was something like this: forEach(instance in theArray) Where theArray is my array, but this seems to be incorrect.

Read More
Short circuit Array.forEach like calling break

[1,2,3].forEach(function(el) { if(el === 1) break; }); How can I do this using the new forEach method in JavaScript? I've tried return;, return false; and break. break crashes and return does nothing but continue iteration.

Read More
For..In loops in JavaScript - key value pairs

I was wondering if there's a way to do something like a PHP foreach loop in JavaScript. The functionality I'm looking for is something like this PHP Snippet: foreach($data as $key => $value) { } I was looking at the JS …

Read More