Published:
Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.
Normally when using JQuery to block a form submit event you would do so because the user has failed to fill out something correctly. In this case you just block the submit event, display your errors and call it done. Something like this...
$(document).ready(function(){
$('#myform').on('submit',function(event){
// Validate the form
...
if( validationFailed ){
// show your error messages
...
// prevent form submit completing
event.preventDefault();
}
});
});
Continue the interrupted form submit
However there will be occasions where you may need to continue the form submission process after something has completed. While not well documented, this is actually very easy to accomplish. All you need to do is call the currenttarget submit like this:
$(document).ready(function(){
$('#myform').on('submit',function(event){
// block form submit event
event.preventDefault();
// Do some stuff here
...
// Continue the form submit
event.currentTarget.submit();
});
});
This is most often useful when dealing with async workflows i.e. ajax
$(document).ready(function(){
$('#myform').on('submit',function(event){
// block form submit event
event.preventDefault();
// Do something ajaxy
$.ajax({
success: function( data ){
// Continue the form submit
event.currentTarget.submit();
}
});
});
});
Reader Comments
Wednesday, November 8, 2017 at 2:54:50 AM Coordinated Universal Time
This is exactly what I was looking for. Thanks for sharing this great Information! Keep it up dude
Thursday, July 19, 2018 at 9:56:33 PM Coordinated Universal Time
Thanks man, i searched a lot on internet but all in vain, n finally i find the solution here about "How to continue Form Submission after its termination "
Tuesday, August 27, 2019 at 3:48:18 AM Coordinated Universal Time
If you create a submit event like this, then trigger a submit event on the current target, will it end up calling itself recursively?
@sneiland
Saturday, March 28, 2020 at 6:25:04 PM Coordinated Universal Time
@Tom. No since the event handler is keeping a reference to the event in its workflow it should not. However If you add a second event listener it is possible you could get them out of order but that should be easy to avoid.