JQuery - prevent default and then continue by default

Question

I have a form that I need additional processing to submit before it submits the form. I can prevent the default form submission behavior, and then do my additional processing (it basically calls the Google Maps API and adds some hidden fields to the form), and then I need a form to submit.

Is there a way to "prevent by default", then some sort of "continue by default?"

Answer 1

When you bind a .submit() event to a form and do what you want to do before returning (true), all this happens before 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

Answer 2

Use jQuery.one()

Attach a handler to the event for elements. A handler is executed no more than once for each element for each type of event.

 $('form').one('submit', function(e) { e.preventDefault(); // do your things ... // and when you done: $(this).submit(); }); 

It does what you want, and you don’t need to worry about sending multiple times.

Answer 3

I would just do it.

  $('#submiteButtonID').click(function(e){ e.preventDefault(); //do ur stuff. $('#formId').submit(); }); 

call preventDefault first and use the submit() function later. If you just need to submit a form

Answer 4

Using this path, you will make an endless loop on your JS. To make 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 all ok. $(this).submit(); } $('form').on('submit', on_submit_function); //Registering on submit. 

Hope this helps! Thank!

Answer 5

This, IMHO, is the most universal and reliable solution (if your actions are initiated by the user, for example, "the user presses the button"):

• upon the first call of the check handler, WHO launched it:
  • if the user has marked it - do your thing, and then run it again (if you want) - programmatically
  • otherwise, do nothing (= "continue by default")

As an example, pay attention to this elegant solution to add "Are you sure?" pop up on any button by simply decorating the button with the attribute. We will conditionally continue the default behavior if the user does not refuse.

1. Add to each button that we want a pop-up window with a warning: "Are you sure?":

 <button class="btn btn-success-outline float-right" type="submit" ays_text="You will lose any unsaved changes... Do you want to continue?" >Do something dangerous</button> 

2. Attach handlers to ALL of these 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 }); 

It.

Answer 6

With jQuery and a small @Joepreludian answer above:

Important points to keep in mind:

• .one(...) instead of .on(...) or.submit(...)
• named function instead of anonymous function since we will refer to it in 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 the allIsWell variable in the snippet below to true or false to test the functionality:

 $('form#my-form').one('submit', function myFormSubmitCallback(evt){ evt.stopPropagation(); evt.preventDefault(); var $this = $(this); var allIsWell = $('#allIsWell').get(0).checked; if(allIsWell) { $this.submit(); } else { $this.one('submit', myFormSubmitCallback); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="/" id="my-form"> <input name="./fname" value="John" /> <input name="./lname" value="Smith" /> <input type="submit" value="Lets Do This!" /> <br> <label> <input type="checkbox" value="true" id="allIsWell" /> All Is Well </label> </form> 

Good luck ...

Answer 7

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

Answer 8

In pure Javascript, you can submit the form after the default prevention.

This is because HTMLFormElement.submit() never calls onSubmit() . Therefore, we rely on this weird specification to submit the form as if it does not have a custom onsubmit handler.

 var submitHandler = (event) => { event.preventDefault() console.log('You should only see this once') document.getElementById('formId').submit() } 

See this script for a synchronous request.

---

Waiting for an asynchronous request to complete is just as simple:

 var submitHandler = (event) => { event.preventDefault() console.log('before') setTimeout(function() { console.log('done') document.getElementById('formId').submit() }, 1400); console.log('after') } 

You can check my script for an example of an asynchronous request.

---

And if you are not using promises:

 var submitHandler = (event) => { event.preventDefault() console.log('Before') new Promise((res, rej) => { setTimeout(function() { console.log('done') res() }, 1400); }).then(() => { document.getElementById('bob').submit() }) console.log('After') } 

And here is this request .

Answer 9

"Validation input without dispatch pipeline":

I just want to check reCaptcha and some other things before checking HTML5, so I did something like this (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(); }); }); 

Answer 10

 $('#myform').on('submit',function(event){ // block form submit event event.preventDefault(); // Do some stuff here ... // Continue the form submit event.currentTarget.submit(); });