Идентификатор захвата формы, которая имеет дочерний вход с name= "id"

Итак, у меня возникла странная проблема... Я хочу получить идентификатор формы:

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

Но запуск document.getElementById("test").id не возвращает test, как ожидалось, но вместо этого возвращает вход с помощью name="id". Кто-нибудь знает, что здесь происходит?

Здесь скрипка, воспроизводящая проблему → http://jsfiddle.net/jascbbfu/

Ответ 1

Имена свойств формы используются для создания именованных свойств формы, которые ссылаются на элемент управления. Итак, где у вас есть:

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

тогда для свойства id формы присваивается ссылка на входной элемент с именем id. Элементам управления формами никогда не должны присваиваться имена, которые являются такими же, как стандартные свойства формы, например. в следующем:

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

невозможно вызвать метод отправки формы, потому что form.submit ссылается на вход, а не на метод.

Как указано в других ответах, вы можете либо изменить имя на то, что не сталкивается со стандартными свойствами формы, либо использовать getAttribute. Первое решение предпочтительнее, так как оно также может привести к более подходящим именам для элементов управления формы и избежать использования getAttribute.

Ответ 2

Что происходит здесь, это старый артефакт с того времени, когда HTML только формализовался. Предполагается, что он сидит только под именованной коллекцией, но браузеры решили создать ярлык в различных случайных местах. В любом случае, вы можете прочитать больше здесь: http://jibbering.com/faq/notes/form-access/ И как только я нахожусь на своем рабочем столе, я приведу цитаты из соответствующих частей.

Ответ 3

Это из-за этой строки здесь:

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

Браузер считает, что вы имеете в виду элемент с именем "id", когда вы говорите:

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

Каким будет элемент <input>. Измените его на другое имя, отличное от id, и оно будет работать.

Ответ 4

JS, по-видимому, рассматривает id как дочерний объект для большей формы, которую вы рассматриваете. Вы ищете функцию, getAttribute, это работает в JSfiddle:

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

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

Надеюсь, что это поможет!