I want to attach a submit() handler to a form to run an ajax request, and when that es 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.

I want to attach a submit() handler to a form to run an ajax request, and when that es 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.

• javascript
• jquery
• ajax
• forms

3 Answers 3

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

$('form').bind('submit', function(){

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

          $('form').unbind('submit').submit();
       }
    });

    //Prevent default form submit
    return false;

});

This should work for you:

$('form').submit(function(e) {
    e.preventDefault();
    var that = this;
    $.post('url', function() {
        that.submit();
    });
});

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.

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;

$('form').submit(function() {
    var form = $(this);
    if( ajaxResponse == false ){
      $.post('url', function() {
          ajaxResponse = true;
          // Do something
          form.submit();
      });
      return false;
    }else{
      return true;
    }
});