Author: Steven Neiland
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();
                  }
            });
      });
});

What Do You Think?

Reader Comments

Keth's Gravatar
Keth
Wednesday, November 8, 2017 at 2:54:50 AM EST

This is exactly what I was looking for. Thanks for sharing this great Information! Keep it up dude

Afraz Khan's Gravatar
Afraz Khan
Thursday, July 19, 2018 at 9:56:33 PM EDT

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 "

Post a Comment

Comment Etiquette:

  • Please keep comments on-topic.
  • Please do not post unrelated questions or large chunks of code.
  • Please do not engage in flaming/abusive behaviour.
  • Comments that contain or appear to be advertisments, will not be published.
  • Comments that appear to be created for the purpose of linkbuilding to commercial sites will be removed.

We are all adults here so play nice.

*
*



Archives Blog Listing

Tag Listing

Learn CF In A Week

Treehouse

 
Fork me on GitHub