Select the <form> element from an <input> element

Question

I'm trying to select the <form> element from an <input> element with JQuery. I've tried this:

$(".inputClass").parent("form")

but it doesn't seem to work.

Answer 1

In HTML 4 you can grab the ancestor that is a form element (by using parents (plural)), but HTML 5 allows a form control to be associated with a form that it not its ancestor, so you can't rely on that.

Form controls have a form property that will give you their associated form element.

var form = $(".inputClass").prop("form");

You can turn it into a jQuery object if you like.

var $form = $( form );

Or in one line:

var $form = $( $(".inputClass").prop("form") );

Answer 2

Try $(".inputClass").closest("form") because the form may not be the direct parent of the input element