获取带有名称= " id "的子输入的表单的id

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

所以我遇到了一个奇怪的问题……我想拿一个表格的id说:

<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?

但是跑步. getelementbyid(“测试”)。id不像预期的那样返回测试，而是返回名称为“id”的输入。有人知道这是怎么回事吗?

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

这里有一个小提琴复制的问题-> http://jsfiddle.net/jascbbfu/。

4 个解决方案

#1

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:

然后，表单的id属性被分配给一个名为id的输入元素。表单控件不应该被赋予与标准表单属性相同的名称，例如:

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

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

因为表单，所以不可能调用表单的submit方法。提交引用的是输入，而不是方法。

As noted in other answers, you can either change the name to something that doesn't * 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.

正如在其他答案中提到的，您可以将名称更改为不与标准表单属性冲突的名称，或者使用getAttribute。首选第一种解决方案，因为它还可能导致表单控件更合适的名称，并避免使用getAttribute。

#2

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.

这里发生的是一个旧的工件，来自于HTML刚刚被格式化的时代。它应该只位于指定的集合之下，但是浏览器决定在不同的随机位置创建快捷访问。无论哪种方式，您都可以在这里阅读更多内容:http://jibbering.com/faq/notes/form-access/，当我在桌面上时，我将引用相关部分。

#3

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.

这就是 <输入> 元素。将它更改为id之外的另一个名称，它将会工作。

#4

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:

JS似乎把id看作是您正在考虑的较大表单的子对象。你在寻找函数getAttribute，它在JSfiddle:

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

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

Hope that helps!

希望会有帮助!

#1