How to get the containing form of an input?

Question

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

Solution 1

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:

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

Solution 2

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

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

Using jQuery:

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

Solution 5

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

I use Firefox on Fedora 12.

View more solutions

Comments

[Ropstah]

Alright this works.. About the form attribute. I just tried it and that also works. But this isn't supported across browsers you're saying?

[Paolo Bergantino]

I'm pretty sure it is. I'm just not 100% sure so I don't want to promise anything. I'm looking into it right now...

[NickFitz]

Use element.form - it will work on more browsers than jQuery does. It's also one property reference, so will be around a thousand times more efficient than walking up the DOM tree with closest().

[Paolo Bergantino]

I agree. As I said, I just wasn't initially sure if the form property was extensively implemented in all common browsers. I've edited my answer to more explicitly list this as the better option while I'm leaving closest as a tidbit if this was a different type of element.

[Falk]

It seems to work also with other input types like select. Good to know.

[Coded Container]

What if you have form input groups and you want to add a new input group depending on which inputs have already been completed? I have tried $('form-group input').on('focus', function(){ $(this).closest('form-group') }); without much luck without actually getting the form group tag. Any ideas as to why it won't keep traversing up the node tree?

[isherwood]

You're basically saying "make this a jQuery object and then make it not a jQuery object".

[Andre Figueiredo]

geez, why not just doing $(this.form)?