Javascript: retrieve hidden field value inside element with ID

Question

guess I have this

<td id="c1s2a"><input type="hidden" name="allow_move" value="1"></td>

how can I access the element 'allow_move' referring with the id c1s2a? there are many allow_move named inputs, so I can't use document.getElementsByName("allow_move").

I tried this: document.getElementById("c1s2a").allow_move=0; but it did not work. (Yes, I want to change its value)

Check out: http://stackoverflow.com/a/12166811/1375372 – Rob Grzyb May 23 '13 at 21:08 — Rob Grzyb, May 23 '13 at 21:08

bfavaretto · Answer 1 · 2013-05-23T21:22:53.067

4

If you really have just the input tag inside the td (and no other text, whitespace, or tags), you can simply use the following to get a reference to that element:

document.getElementById("c1s2a").firstChild;

To set its value:

document.getElementById("c1s2a").firstChild.value = 0;

There is also a property called firstElementChild, which ignores text nodes and comment nodes, but unfortunately isn't supported in IE before version 9.

Another option on modern browsers is document.querySelector, that takes a CSS selector and returns a DOM node. The support table says it's IE8+, but I heard there are some compatibility issues on IE8.

Examples:

document.querySelector("#c1s2a input").value = 0;

or

document.querySelector("#c1s2a input[name='allow_move']").value = 0;

edited May 23 '13 at 21:22

answered May 23 '13 at 21:08

bfavaretto

71,580
16
111
150

This one here is the neatest – Isaac May 23 '13 at 21:10
@Isaac Someone doesn't agree (I got -1) – bfavaretto May 23 '13 at 21:10
Not in my opinion. inelegant and will break if the code is formatted in any way – mplungjan May 23 '13 at 21:11
`If you really have just the input tag inside the td` Which from what we can see is true. It still stands – Isaac May 23 '13 at 21:12
I agree it may break, but how can this be less elegant than what you suggested? It looks a lot cleaner. @mplungjan – bfavaretto May 23 '13 at 21:12
I prefer the getElement...getElements since it is the same type of access and will not break at a space – mplungjan May 23 '13 at 21:13
While your answer gets the job done and is cleaner, mplungjan's is more readable and allows for the element to be moved around in the future while not breaking (assuming no other elements by name "allow_move" are added). I don't have to go to the HTML to determine which element is the first child. – BLaZuRE May 23 '13 at 21:15
1

@BLaZuRE Sure. I like it that we're presenting different options. I'm actually surprised that nobody said "use jquery" yet. – bfavaretto May 23 '13 at 21:17
1

I have reverted my downvote since it seems there is no getElementsByName for a TD element – mplungjan May 23 '13 at 21:18
Funny I was about to look at querySelector but refrained due to incompatibility. jQuery would be safer then – mplungjan May 23 '13 at 21:31

score 3 · Answer 2 · answered May 23 '13 at 21:20

3

If you cannot rely on the input being the first child, try this:

document.getElementById("c1s2a").children["allow_move"]

See http://jsfiddle.net/KemmU/

answered May 23 '13 at 21:20

ronnyfm

1,973
25
31

This may be the easiest solution indeed. – bfavaretto May 23 '13 at 21:32
[IE9 (IE6-8 include comment nodes)](https://developer.mozilla.org/en-US/docs/Web/API/Element.children) – mplungjan May 23 '13 at 21:33
@mplungjan Will comment nodes make a difference when using the element's name as a subscript? BTW, the answer to [your last question](http://stackoverflow.com/q/16684022/825789) seems to imply this should work. – bfavaretto May 23 '13 at 21:38
[It still works for me](http://jsfiddle.net/KemmU/2/) even with comment nodes in the collection (or whatever that is). – bfavaretto May 23 '13 at 21:45

mplungjan · Answer 3 · 2013-05-23T21:30:01.343

2

I would have sworn that

document.getElementById("c1s2a").getElementsByName("allow_move")[0].value=0

would work, but as this fiddle shows, it gives Uncaught typeerror for the cell.getElementsByName!!!

Here is an alternative that I am not too happy about

window.onload=function() {
  var inputs = document.getElementsByName("allow_move");
    for (var i=0, n=inputs.length;i<n;i++) {
        console.log(inputs[i].parentNode.id)
        if (inputs[i].parentNode.id=="c1s2a") {
            inputs[i].value=0;
        }    
    }
}

edited May 23 '13 at 21:30

answered May 23 '13 at 21:08

mplungjan

169,008
28
173
236

Don't you mean `getElementsByName`? – Blender May 23 '13 at 21:09
Turns out this doesn't work at all `Uncaught TypeError: Object # has no method 'getElementsByName' ` – Isaac May 23 '13 at 21:19
Yes I see that. That is really surprising – mplungjan May 23 '13 at 21:21
An alternative: `document.getElementsByName("allow_move")[x].value = 0;`, but you have to choose the correct element index. `document.getElementById("c1s2a").childNodes.item(0).value = 0;` may also work. – BLaZuRE May 23 '13 at 21:21

score 0 · Answer 4 · answered May 23 '13 at 21:45

There are multiple ways of doing this. Some more efficient than others.

var allow_moves = document.getElementsByName("allow_move");
var index=0;
for(var j=allow_moves.length; index<=j; index++)
{
    if(allow_moves[index]&&allow_moves[index].parentNode.id=='c1s2a')break;
}
if(index<allow_moves.length)console.log(allow_moves[index].value);


console.log(document.getElementById("c1s2a").firstElementChild.value);


console.log(document.getElementById("c1s2a").childNodes[1].value);


console.log(document.getElementById("c1s2a").children["allow_move"].value);


//because I like being difficult, and because you never should, here is the regex way
//get the value
console.log(document.getElementById("c1s2a").innerHTML.replace(/([\s\S]*value=\")([^"]*)([\s\S]*)/g,"$2"));
//replace the value
document.getElementById("c1s2a").innerHTML = document.getElementById("c1s2a").innerHTML.replace(/([\s\S]*value=\")([^"]*)([\s\S]*)/g,"$1"+newValue+"$3");

Javascript: retrieve hidden field value inside element with ID

4 Answers4