jQuery: Stop submitting form, perform script, cont

2019-03-12 18:36发布

问题:

I have a form, and when I submit him I execute multiple script. Here is my code:

$("#RequestCreateForm").submit(function (e) {
    if ($("#RequestCreateForm").validate().checkForm() == false) { return; }

    e.preventDefault();

    //many scripts

    //How to continue submitting?
}

Is it possible to continue submitting the form (which is stopped with e.preventDefault();) after //many scripts?

Thank you

回答1:


$("#RequestCreateForm").submit(function (e) {
    if ($("#RequestCreateForm").validate().checkForm() === false) { 
       e.preventDefault(); 
       //form was NOT ok - optionally add some error script in here

       return false; //for old browsers 
    } else{
       //form was OK - you can add some pre-send script in here
    }

    //$(this).submit(); 
    //you don't have to submit manually if you didn't prevent the default event before
}


回答2:

When you call $("#RequestCreateForm").submit(), the script will just run through the event handler again, and cause an infinite loop (as Koen pointed out in a comment on the accepted answer). So, you need to remove the event handler before submitting:

$("#RequestCreateForm").on('submit', function (e) {
    e.preventDefault();
    // do some stuff, and if it's okay:
    $(this).off('submit').submit();
});

The last line needs to be in a conditional statement, otherwise it'll just always happen, and negate your e.preventDefault(); at the top.



回答3:

$("#RequestCreateForm").submit(function (e) {
    if ($("#RequestCreateForm").validate().checkForm() == false) 
    { 
         e.preventDefault();
         return false; 
    }        

    //other scripts

}


回答4:

$("#RequestCreateForm").submit(function (e) {
    if ($("#RequestCreateForm").validate().checkForm() == false) { return; }

    e.preventDefault();

    //many scripts

    // Bypass the jquery form object submit and use the more basic vanilla
    // javascript form object submit

    $("#RequestCreateForm")[0].submit();

}


回答5:

To avoid submit loops, an additional variable should be used.

var codeExecuted = false;
$('#RequestCreateForm').submit(function(e) {
    ...
    if(!codeExecuted){
        e.preventDefault();
        ...
        functionExecuted = true;
        $(this).trigger('submit');
    }
});


回答6:

All solutions here are too complicated or lead to javascript error, simpliest and clearest solution I guess:

jQuery("#formid").submit(function(e) {
        if( ! (/*check form*/)  ){  //notice the "!"
          e.preventDefault();
          //a bit of your code
        } //else do nothing, form will submit
}); 


回答7:

Here is my approach to avoid the infinite loop.

  • In the form, I use a "button" with an id (e.g. <input type="button" id="submit" value="submit"/>) to mimic the submit button;
  • In the script I have something like this:
$('#submit').click(function() {
  if(//validation rules is ok)
  {
      $("#RequestCreateForm").submit(); //assuming the form id is #RequestCreateForm
  }
  else
  {
      return false;
  }
});


回答8:

return; is the same thing as e.preventDefault();

try

$("#RequestCreateForm").trigger('submit');