Question

submitting form with jQuery

works

         $('#testform').submit();

doesn’t work

              $('#testform').submit(function () {
                 alert('test1');
                return true;
              });

This is just an exmaple but at times i’d like to do stuff before submission of the form. Like for example submit the form using $.POST

Update:

If I keep both then the $.POST has no value because the form still gets submitted the traditional way, without ajax…

                    $("#testform").submit(function() {
                            $.post('/myajaxcontroller', function(data) {
                                $('#result').html(data);
                            });
                    });
                    $("#testform").submit();   

Answer 1

The first example submits the form. The second example sets an event handler for when you submit the form. You need both;

If you need to to something asynchronous, you’re forced to return false from the submit handler so the form doesn’t get submitted, and you can submit the form in the AJAX callback.

 // Send an AJAX request before submitting the form
 $('#testform').submit(function () {
     var form = this;
     $.post('/myajaxcontroller', function(data) {
         $('#result').html(data);
         // everything is good, submit the form on our own
         if (data.looksGood) {
             form.submit();
         }
     });

     return false;
 });