javascript - jquery call custom form submit, then normal - Stack Overflow

admin管理员组

文章数量:1313347

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

Share Improve this question Follow edited Nov 21, 2011 at 15:32 Reporter 3,94855 gold badges3535 silver badges4949 bronze badges asked Nov 21, 2011 at 15:30 UncleCheeseUncleCheese 1,58499 silver badges1414 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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;
    }
});

本文标签： javascriptjquery call custom form submitthen normalStack Overflow