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

Question

I want to trigger the submit event of the form in which the current element is located. Sometimes I know what works:

this.form.submit(); 

I am wondering if there is a better solution, possibly with jQuery, since I'm not sure if the 100% method works in every browser.

Edit:

The situation that 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 when changing the <select> .

What I'm looking for is a solution that works in any field in any form, without knowing the identifier or name in the form. $('form:first') and $('form') will not work because the form may be the third on the page. In addition, I already use jQuery on the site, so using a bit of jQuery is not a big problem.

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

Answer 1

I think you are looking for something like this:

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

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

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

If for some reason you are not using jQuery 1.3 or higher, you can call parents instead of closest .

Answer 2

 this.form.submit(); 

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

Answer 3

You can always jQuery-ize in your .submit form, but it can 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 a send event, but this is a different concept.

Answer 4

As in Matthew's answer, I just found that you can do the following:

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

Wrong: the problem with using parental functionality is that the field must be directly inside the form for work (not inside tds, labels, etc.).

I am fixing it: the parent s (with s) also works. Thanks Paolo for pointing this out.

Answer 5

I found that using jQuery the best solution is

 $(this.form).submit() 

Using this operator, jquery plugins (for example, the jquery form plugin ) work correctly, and jQuery DOM overhead is minimized.

Answer 6

Your question is somewhat confusing in that you are not explaining what you mean by the "current element".

If you have several forms on the page with all types of input elements and a button of type "send", then pressing "enter" after filling out any of the fields will lead to the sending of this form. You do not need Javascript.

But if you have several "submit" buttons in the form and other input data (for example, "edit row" and / or "delete row" in the table), then you can place this row.

Another way (without the need for Javascript) could be to assign different values ​​to all of your buttons (like "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 sent, and only the value of the button you selected will be sent (for other input values).

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

Answer 7

In jQuery you can call

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

I don’t know if this is much better. I think form.submit (); is quite versatile.

Answer 8

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