How to get the containing form of an input?

I need to get a reference to the FORM parent of an INPUT when I only have a reference to that INPUT. Is this possible with JavaScript? Use jQuery if you like.

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

This doesn't work:

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


alert($(form).attr("name"));
162724 次浏览
小开
最佳答案

Native DOM elements that are inputs also have a form attribute that points to the form they belong to:

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

According to w3schools, the .form property of input fields is supported by IE 4.0+, Firefox 1.0+, Opera 9.0+, which is even more browsers that jQuery guarantees, so you should stick to this.

If this were a different type of element (not an <input>), you could find the closest parent with closest:

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

Also, see this MDN link on the form property of HTMLInputElement:

小开

Using jQuery:

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

Every input has a form property which points to the form the input belongs to, so simply:

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

I needed to use element.attr('form') instead of element.form.

I use Firefox on Fedora 12.

小开

If using jQuery and have a handle to any form element, you need to get(0) the element before using .form

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

I use a bit of jQuery and old style javascript - less code

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

This is a complete reference to the form containing the element

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

and in the html, you need to find that element, and add the attribut "form" to connect to that form, please refer to http://www.w3schools.com/tags/att_input_form.asp but this form attr doesn't support IE, for ie, you need to pass form id directly.

小开

would this work? (leaving action blank submits form back to itself too, right?)

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

"this" would be the select element, .form would be its parent form. Right?

小开

simply as:

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

And one more....

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
小开

This example of a Javascript function is called by an event listener to identify the form

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

提交答案