Take the 2-minute tour ×

I want to attach a submit() handler to a form to run an ajax request, and when that comes back, the form submits itself normally. Is this possible? $('#myForm').submit() will just recursively call the same function.

I'd rather not attach the event handler to the click of the submit button, because not all users submit forms with the mouse. Many, like myself, just use the return key.

share|improve this question

3 Answers 3

up vote 4 down vote accepted

Try this. In the below code I am unbinding the form submit event handler in ajax success handler and then submitting the form.


    //Do ajax call here
       url: "url",
       success: function(){
          //On success do what you want to do 
          //and then ubind the submit event handler and submit the form


    //Prevent default form submit
    return false;

share|improve this answer
Unbind! Duh! Thanks, I'll try it, but I already know it will work. :) –  UncleCheese Nov 21 '11 at 15:48
@UncleCheese - If it helped you, can you mark this as an answer? –  ShankarSangoli Nov 21 '11 at 19:43

This should work for you:

    var that = this;
    $.post('url', function() {

e.preventDefault() stops the default form submit. Then you can call .submit() on the dom element to perform a submit which is not caught by the jQuery handler.

share|improve this answer
Interesting. I'll try this. I'm having a hard time seeing why that.submit() won't hit the preventDefault() call? –  UncleCheese Nov 21 '11 at 15:49

You could have a variable that flags whether the ajax response has been received or not. This may be a little less graceful than unbinding the 'submit' event handler, but it's another idea.

var ajaxResponse = false;

    var form = $(this);
    if( ajaxResponse == false ){
      $.post('url', function() {
          ajaxResponse = true;
          // Do something
      return false;
      return true;
share|improve this answer

Your Answer


