如何获得输入的包含形式?


106

当我仅具有对该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"));

Answers:


185

作为输入的本机DOM元素还具有form指向它们所属形式的属性:

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

根据w3schools.form,IE 4.0 +,Firefox 1.0 +,Opera 9.0+支持输入字段属性,这是jQuery保证的更多浏览器,因此您应该坚持这一点。

如果这是另一种类型的元素(不是<input>),则可以通过以下方式找到最接近的父元素closest

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

另外,请参阅以下form属性的MDN链接HTMLInputElement


好的,这有效。关于表单属性。我刚试过,那也行得通。但是您所说的浏览器不支持此功能吗?
罗布斯塔2009年

我很确定是这样。我只是不确定100%,所以我不想答应任何事情。我现在正在调查...
Paolo Bergantino,2009年

5
使用element.form-与jQuery相比,它将在更多的浏览器上运行。它也是一个属性引用,因此它的效率将比使用close()遍历DOM树高出一千倍。
NickFitz

1
我同意。就像我说的那样,我最初不确定表单属性是否在所有常见的浏览器中得到了广泛实现。我已经编辑了答案,以更明确地将其列出为更好的选择,而如果这是另一种类型的元素,则将最近的信息保留为花絮。
Paolo Bergantino,2009年

它似乎也可以与其他输入类型(例如select)一起使用。很高兴知道。
2016年

42

每个输入都有一个form属性,该属性指向该输入所属的形式,因此很简单:

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



2

如果使用jQuery并且可以处理任何表单元素,则在使用.form之前需要先获取(0)该元素

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


2

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

我在Fedora 12上使用Firefox。



0

还有一个...

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

0

事件侦听器调用此Javascript函数示例以标识表单

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

-2

这会工作吗?(将操作留空也将表单提交回给自己,对吧?)

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

“ this”将是select元素,.form将是其父表单。对?

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.