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');


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

var form = element.form;

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');

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

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 use a bit of jQuery and old style javascript - less code


This is a complete reference to the form containing the element

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 needed to use element.attr('form') instead of element.form.

I use Firefox on Fedora 12.

simply as:

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

And one more....

var _e = $(; // 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 " +; // form id

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>

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

Using jQuery:

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

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 but this form attr doesn't support IE, for ie, you need to pass form id directly.

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

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