Is there a better jQuery solution to this.form.submit();?

Darryl Hein picture Darryl Hein · Jan 6, 2009 · Viewed 121.2k times · Source

I want to trigger the submit event of the form the current element is in. A method I know works sometimes is:

this.form.submit();

I'm wondering if there is a better solution, possibly using jQuery, as I'm not 100% sure method works in every browser.

Edit:

The situation I have is, as follows:

<form method="get">
    <p><label>Field Label
        <select onchange="this.form.submit();">
            <option value="blah">Blah</option>
            ....
        </select></label>
    </p>
</form>

I want to be able to submit the form on change of the <select>.

What I'm looking for is a solution that works on any field within any form without knowing the id or name on the form. $('form:first') and $('form') won't work because the form could be the third on the page. Also, I am using jQuery on the site already, so using a bit of jQuery is not a big deal.

So, is there a way to have jQuery retrieve the form the input/select/textarea is in?

Answer

Matthew Crumley picture Matthew Crumley · Jan 7, 2009

I think what you are looking for is something like this:

$(field).closest("form").submit();

For example, to handle the onchange event, you would have this:

$(select your fields here).change(function() {
    $(this).closest("form").submit();
});

If, for some reason you aren't using jQuery 1.3 or above, you can call parents instead of closest.