How to get the containing form of an input?
JavascriptJqueryFormsInputJavascript Problem Overview
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"));
Javascript Solutions
Solution 1 - Javascript
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
:
Solution 2 - Javascript
Every input has a form
property which points to the form the input belongs to, so simply:
function doSomething(element) {
var form = element.form;
}
Solution 3 - Javascript
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
Solution 4 - Javascript
Using jQuery:
function doSomething(element) {
var form = $(element).closest("form").get().
//do something with the form.
}
Solution 5 - Javascript
I needed to use element.attr('form')
instead of element.form
.
I use Firefox on Fedora 12.
Solution 6 - Javascript
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;
Solution 7 - Javascript
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.
Solution 8 - Javascript
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;
Solution 9 - Javascript
simply as:
alert( $(this.form).attr('name') );
Solution 10 - Javascript
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
Solution 11 - Javascript
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?