如何获取输入的包含形式？答案

【问题标题】：How to get the containing form of an input?如何获取输入的包含形式？
【发布时间】：2026-01-24 02:30:01
【问题描述】：

当我只有对 INPUT 的引用时，我需要获取对 INPUT 的父 FORM 的引用。这可以用 JavaScript 实现吗？如果你愿意，可以使用 jQuery。

function doSomething(element) {
    //element is input object
    //how to get reference to form?
}

这不起作用：

var form = $(element).parents('form:first');

alert($(form).attr("name"));

【问题讨论】：

标签： javascript jquery forms input

【解决方案1】：

这个 Javascript 函数示例由事件侦听器调用以识别表单

function submitUpdate(event) {
    trigger_field = document.getElementById(event.target.id);
    trigger_form = trigger_field.form;

【讨论】：

【解决方案2】：

我需要使用element.attr('form') 而不是element.form。

我在 Fedora 12 上使用 Firefox。

【讨论】：

【解决方案3】：

还有一个……

var _e = $(e.target); // e being the event triggered
var element = _e.parent(); // the element the event was triggered on
console.log("_E " + element.context); // [object HTMLInputElement]
console.log("_E FORM " + element.context.form); // [object HTMLFormElement]
console.log("_E FORM " + element.context.form.id); // form id

【讨论】：

【解决方案4】：

简单来说：

alert( $(this.form).attr('name') );

【讨论】：

【解决方案5】：

这行得通吗？（将操作留空也会将表单提交回自身，对吗？）

<form action="">
<select name="memberid" onchange="this.form.submit();">
<option value="1">member 1</option>
<option value="2">member 2</option>
</select>

"this" 是选择元素，.form 是它的父表单。对吧？

【讨论】：

【解决方案6】：

function doSomething(element) {
  var form = element.form;
}

在html中，你需要找到那个元素，并添加属性“form”来连接到那个表单，请参考http://www.w3schools.com/tags/att_input_form.asp 但是这个form attr不支持IE，因为ie需要直接传form id。

【讨论】：

【解决方案7】：

作为输入的原生 DOM 元素也有一个 form 属性，指向它们所属的表单：

var form = element.form;
alert($(form).attr('name'));

根据w3schools，IE 4.0+, Firefox 1.0+, Opera 9.0+ 支持输入字段的.form 属性，jQuery 保证的浏览器更多，所以你应该坚持下去。

如果这是不同类型的元素（不是<input>），您可以找到最近的父元素closest：

var $form = $(element).closest('form');
alert($form.attr('name'));

此外，请参阅 HTMLInputElement 的 form 属性上的此 MDN 链接：

https://developer.mozilla.org/en/DOM/HTMLInputElement#Properties

【讨论】：

好吧，这行得通。关于表单属性。我刚刚尝试过，这也有效。但是你说的浏览器不支持这个？
我很确定它是。我只是不是 100% 确定，所以我不想承诺任何事情。我现在正在研究它...
使用 element.form - 它可以在比 jQuery 更多的浏览器上工作。它也是一个属性引用，因此将比使用最接近（）遍历 DOM 树的效率高出大约一千倍。
我同意。正如我所说，我最初只是不确定表单属性是否已在所有常见浏览器中广泛实现。我已经编辑了我的答案，以更明确地将其列为更好的选择，而如果这是一种不同类型的元素，我将把它作为一个花絮。
它似乎也适用于其他输入类型，如选择。很高兴知道。

【解决方案8】：

我使用了一些 jQuery 和旧式 javascript - 更少的代码

$($(this)[0].form)

这是对包含该元素的表单的完整引用

【讨论】：

你基本上是在说“把它变成一个 jQuery 对象，然后让它不是一个 jQuery 对象”。
天啊，为什么不直接做$(this.form)？

【解决方案9】：

如果使用 jQuery 并且有任何表单元素的句柄，则需要在使用 .form 之前获取 (0) 元素

var my_form = $('input[name=first_name]').get(0).form;

【讨论】：

【解决方案10】：

每个输入都有一个form 属性，它指向输入所属的表单，所以很简单：

function doSomething(element) {
  var form = element.form;
}

【讨论】：

【解决方案11】：

使用jQuery：

function doSomething(element) {
    var form = $(element).closest("form").get().
    //do something with the form.
}

【讨论】：