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

8

49

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?

Ezra answered 6/1, 2009 at 20:49 Comment(2)
The method you post has always worked for me.Federation
Yes, why wouldn't this.form.submit() work?Ombudsman
D
117

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.

Dolor answered 7/1, 2009 at 3:38 Comment(2)
use closest("form") instead of parents("form"). parents() gets all the parents of the element that are forms, closest() stops ate the first form that is parent of the elementMaverick
@TeKapa: Thanks. jQuery 1.3 (which added the closest function) came out a week after I answered the question.Dolor
A
25
this.form.submit();

This is probably your best bet. Especially if you are not already using jQuery in your project, there is no need to add it (or any other JS library) just for this purpose.

Aperiodic answered 6/1, 2009 at 21:12 Comment(0)
S
5

I have found that using jQuery the best solution is

$(this.form).submit()

Using this statement jquery plugins (e.g. jquery form plugin) works correctly and jquery DOM traversing overhead is minimized.

Savadove answered 12/2, 2014 at 19:5 Comment(0)
E
4

Similar to Matthew's answer, I just found that you can do the following:

$(this).closest('form').submit();

Wrong: The problem with using the parent functionality is that the field needs to be immediately within the form to work (not inside tds, labels, etc).

I stand corrected: parents (with an s) also works. Thxs Paolo for pointing that out.

Ezra answered 4/4, 2009 at 6:33 Comment(3)
with parent('form') what you said may be true, but with parentS('form') it should work even if it the field is inside a td, etc.Asthenopia
Wouldn't parents('form') return all forms that are parents of this element? That would potentially submit an outer form that you hadn't intended to submit yet.Entremets
Just came across this and want to add that you should not have forms within forms. This is invalid and won't work in IE. So using parents("form") is perfectly acceptable, although I don't know how efficient it is compared to closest("form").Fineness
C
3

You can always JQuery-ize your form.submit, but it may just call the same thing:

$("form").submit(); // probably able to affect multiple forms (good or bad)

// or you can address it by ID
$("#yourFormId").submit();

You can also attach functions to the submit event, but that is a different concept.

Cristinecristiona answered 6/1, 2009 at 20:55 Comment(2)
Question says he doesn't want to do thisLimen
It certainly does now. That was in the edit that occurred the day after my answer was submitted.Cristinecristiona
O
1

Your question in somewhat confusing in that that you don't explain what you mean by "current element".

If you have multiple forms on a page with all kinds of input elements and a button of type "submit", then hitting "enter" upon filling any of it's fields will trigger submission of that form. You don't need any Javascript there.

But if you have multiple "submit" buttons on a form and no other inputs (e.g. "edit row" and/or "delete row" buttons in table), then the line you posted could be the way to do it.

Another way (no Javascript needed) could be to give different values to all your buttons (that are of type "submit"). Like this:

<form action="...">
    <input type="hidden" name="rowId" value="...">
    <button type="submit" name="myaction" value="edit">Edit</button>
    <button type="submit" name="myaction" value="delete">Delete</button>
</form>

When you click a button only the form containing the button will be submitted, and only the value of the button you hit will be sent (along other input values).

Then on the server you just read the value of the variable "myaction" and decide what to do.

Oleviaolfaction answered 6/1, 2009 at 21:15 Comment(0)
C
0

In JQuery you can call

$("form:first").trigger("submit")

Don't know if that is much better. I think form.submit(); is pretty universal.

Comedietta answered 6/1, 2009 at 20:52 Comment(0)
G
0
<form method="get">
   <p><label>Field Label
      <select onchange="this.form.submit();">
         <option value="blah">Blah</option>
            ....
     </select>
     </label>
   </p>
    **<!-- <input name="submit" type="submit" /> // name="submit_new_name" -->**
  </form>

<!-- 

   this.form.submit == this.form.elements['submit'];

-->
Glyph answered 17/6, 2009 at 10:50 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.