jQuery - prevent default then continue default

Question

I have a form that  when submitted  I need to do some additional processing before it should submit the form  I can prevent default form submission behavior  then do my additional processing  it s basically calling Google Maps API and adding a few hidden fields to the form  -- and then I need the form to submit   Is there a way to  prevent default   then some point later  continue default

User · Answer

With jQuery and a small variation of  Joepreludian s answer above   Important points to keep in mind     one      instead on  on      or  submit      named function instead of anonymous function since we will be referring it within the callback         form my-form   one  submit   function myFormSubmitCallback evt        evt stopPropagation        evt preventDefault        var  this     this       if  allIsWell             this submit       submit the form and it will not re-enter the callback because we have worked with  one            else            this one  submit   myFormSubmitCallback      lets get into the callback  one  more time                You can change the value of allIsWell variable in the below snippet to true or false to test the functionality    x000D   x000D     form my-form   one  submit   function myFormSubmitCallback evt   x000D    evt stopPropagation    x000D    evt preventDefault    x000D    var  this     this   x000D    var allIsWell       allIsWell   get 0  checked  x000D    if allIsWell    x000D       this submit    x000D      else   x000D       this one  submit   myFormSubmitCallback   x000D      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt form action     id  my-form  gt  x000D     lt input name    fname  value  John    gt  x000D     lt input name    lname  value  Smith    gt  x000D     lt input type  submit  value  Lets Do This     gt  x000D     lt br gt  x000D     lt label gt  x000D       lt input type  checkbox  value  true  id  allIsWell    gt  x000D      All Is Well x000D     lt  label gt  x000D   lt  form gt  x000D   x000D   x000D    Good Luck

User · Answer

Use jQuery one    Attach a handler to an event for the elements  The handler is executed at most once per element per event type     form   one  submit   function e        e preventDefault           do your things             and when you done        this  submit         The use of one prevent also infinite loop because this custom submit event is detatched after the first submit

User · Answer

When you bind the  submit   event to the form  and you do the things you want to do before returning  true   these things happen prior to the actual submission   For example      form   submit function        alert  I do something before the actual submission        return true        Simple example  Another example on jquery com  http   api jquery com submit  entry-examples

User · Answer

myform   on  submit  function event              block form submit event         event preventDefault                Do some stuff here                         Continue the form submit         event currentTarget submit

User · Answer

In a pure Javascript way  you can submit the form after preventing default   This is because HTMLFormElement submit   never calls the onSubmit    So we re relying on that specification oddity to submit the form as if it doesn t have a custom onsubmit handler here   var submitHandler    event    gt      event preventDefault     console log  You should only see this once     document getElementById  formId   submit       See this fiddle for a synchronous request      Waiting for an async request to finish up is just as easy   var submitHandler    event    gt      event preventDefault     console log  before     setTimeout function         console log  done       document getElementById  formId   submit        1400     console log  after       You can check out my fiddle for an example of an asynchronous request     And if you are down with promises    var submitHandler    event    gt      event preventDefault     console log  Before       new Promise  res  rej    gt          setTimeout function             console log  done           res            1400          then      gt          document getElementById  bob   submit            console log  After       And here s that request

User · Answer

This is  IMHO  the most generic and robust solution  if your actions are user-triggered  eg  user clicks on a button      the first time a handler is called check WHO triggered it    if a user tiggered it - do your stuff  and then trigger it again  if you want  - programmatically otherwise - do nothing     continue default      As an example  note this elegant solution to adding  Are you sure   popup to any button just by decorating a button with an attribute  We will conditionally continue default behavior if the user doesn t opt out   1  Let s add to every button that we want an  are you sure  popup a warning text    lt button class  btn btn-success-outline float-right  type  submit   ays text  You will lose any unsaved changes    Do you want to continue                   gt Do something dangerous lt  button gt    2  Attach handlers to ALL such buttons      button ays text    click function  e  from        if  from    null        user clicked it          var btn     this           e preventDefault            if  confirm      true                btn trigger  click     your-app-name-here-or-anything-that-is-not-null                            otherwise - do nothing  ie continue default       That s it

User · Answer

Validation injection without submit looping    I just want to check reCaptcha and some other stuff before HTML5 validation  so I did something like that  the validation function returns true or false      document  ready function       var application form      form application-form        application form on  submit  function e            if application form extra validation     true              return true                     e preventDefault

User · Answer

I would just do        submiteButtonID   click function e        e preventDefault           do your stuff           formId   submit           Call  preventDefault at first and use submit   function later  if you just need to submit the form

User · Answer

Using this way You will do a endless Loop on Your JS  to do a better way you can use the following  var on submit function   function evt       evt preventDefault      The form wouln t be submitted Yet          yourcode            this  off  submit   on submit function     It will remove this handle and will submit the form again if it s all ok        this  submit          form   on  submit   on submit function     Registering on submit    I hope it helps  Thanks

User · Answer

You can use e preventDefault   which will stop the current operation   than you can do    form   submit          form   submit function  e        return   e submit      if blabla            else           form   submit                submit  true

[javascript] jQuery - prevent default, then continue default

With `jQuery` and a small variation of @Joepreludian's answer above:

Important points to keep in mind:

You can change the value of `allIsWell` variable in the below snippet to `true` or `false` to test the functionality:

Examples related to javascript

Examples related to jquery