Grab id of a form that has a child input with a name="id"

Question

So I've run into a strange issue... I want to grab the id of a form say:

<form id="test">
    <input name="id" type="hidden" value/>
</form>

But running document.getElementById("test").id doesn't return test as expected but instead returns the input with the name="id". Anyone know what is going on here?

Here's a fiddle reproducing the issue -> http://jsfiddle.net/jascbbfu/

why do you need to find the id of the form? you already have it... — Deep, Feb 06 '15 at 00:11
Hm, in your jsfiddle, I noticed that the name of the second test input, is 'id1'; I'll bet you it's interpreting the `.id` as a child element of that name, rather than as an actual attribute of itself. I'll take a look in jsfiddle — Eleanor Zimmermann, Feb 06 '15 at 00:19

score 12 · Accepted Answer · answered Feb 06 '15 at 00:42

Form control names are used to create named properties of the form that reference the control. So where you have:

<form id="test">
  <input name="id">
</form>

then the form's id property is assigned a reference to the input element named id. Form controls should never be given names that are the same as standard form properties, e.g. in the following:

<form>
  <input name="submit">
</form>

it is impossible to call the form's submit method because form.submit references the input, not the method.

As noted in other answers, you can either change the name to something that doesn't clash with standard form properties, or use getAttribute. The first solution is preferred as it will also likely lead to more suitable names for the form controls and avoid the use of getAttribute.

Thanks, didn't know you could overwrite attributes like that, pretty hacky ;p I'll probably go with getAttribute or adding custom attributes (e.g. "column=") because I like the idea of mapping my form inputs directly to my database columns. — Jake Zieve, Feb 06 '15 at 01:00

score 3 · Answer 2 · answered Feb 06 '15 at 00:24

3

What happens here is an old artifact from the times when HTML was just getting formalised. It's supposed to sit only under a named collection, but browsers decided to create shortcut access in various random places. Either way, you can read more here: http://jibbering.com/faq/notes/form-access/ And once I am on my desktop I will quote the relevant parts.

answered Feb 06 '15 at 00:24

David Mulder

26,123
9
51
114

Not about HTML, it's about the DOM. – RobG Feb 06 '15 at 00:35

score 0 · Answer 3 · answered Feb 06 '15 at 00:18

It's because of this line here:

<form id="test">
    <input name="id" type="hidden"/>   <!-- HERE -->
</form>

The browser thinks that you mean the element with the name of "id" when you say:

document.getElementById("test").id // Gets input with the name of "id"

Which would be the <input> element. Change it to another name other than id and it will work.

score 0 · Answer 4 · answered Feb 06 '15 at 00:25

The JS appears to be considering id as a child object to the larger form you are considering. You're looking for the function, getAttribute, this works in JSfiddle:

alert(document.getElementById("test").getAttribute("id"));
alert(document.getElementById("test2").getAttribute("id"));

http://jsfiddle.net/jascbbfu/3/

Hope that helps!

Grab id of a form that has a child input with a name="id"

4 Answers4