67147

make a $.post before form action takes place

Question:

I have a form and when the user clicks the submit button I want to run a separate PHP script before the form-action (going to the next page) gets executed.

Of course I can stop the form-action with evt.preventDefault(); and then I can fire my jquery $.post call but then I cannot 'resume' or undo this preventDefault call, as far as I can see.

So what is the best way to execute a script that process some information after a user clicks the submit button BUT before the user gets redirected to the next page defined in the form action tag?

(Of course I could just carry over the data and perform whatever I want on the next page – but in this case, I would like to keep it separate).

Thanks for any suggestions!

Answer1:

You can try something like this:

var posted = false; $('form').on('submit', function(ev) { if ( ! posted ) { ev.preventDefault(); $.post(url).done(function() { posted = true; $('form').trigger('submit'); }); } posted = false; });

Or more succinct, using <a href="http://api.jquery.com/trigger/#example-3" rel="nofollow">extra parameters</a>:

$('form').on('submit', function(ev, posted) { if ( ! posted ) { ev.preventDefault(); $.post(url).done(function() { $('form').trigger('submit', [true]); }); } });

Answer2:

<ol><li>

Your $.post call can be run synchronously, so the form would not submit until you've got a response from the server.

</li> <li>

You can submit the form programmatically, perhaps in your callback function.

</li> </ol>

Answer3:

prevent default on form, then run post, on success of post, target the form by id and use .submit();

$('#submit-button').click(function(e) { e.preventDefault(); $.post({ url:'url', success:function() { $('#formid').submit() } }); });

Answer4:

<ol><li>Go head with your evt.preventDefault().</li> <li>Make an $.ajax() call to run your php script.</li> <li>In the $.ajax() success/failure callback, check the output of the php script you want to run, and accordingly make a $.post call (or not).</li> </ol>

Answer5:

You can always hook the click event, and do your stuff. When you are done you just do $(form).submit();

<a href="http://jsfiddle.net/DNTYg/" rel="nofollow">Working example</a>

$("#submitbutton").click(function(e) { e.preventDefault(); // do your ajax stuff here.. $.post(). $("#form").submit(); });

Answer6:

You can use just use the native submit function instead of jQuery's submit() which goes through the event handler again

$('form').submit(function(e){ // change form to your form id e.preventDefault(); var el = this; // store this form in variable $.post('/echo/html/',data,function(d){ // your post function el.submit(); // trigger native submit function in success callback }); });

<a href="http://jsfiddle.net/5vEsu/" rel="nofollow">FIDDLE</a>

Answer7:

In your form tag, add onsubmit="myfunction()"

Recommend

  • Python create save button that saves an edited version to the same file(not save as)
  • How can I delete a user from sql server 2012 who owns a schema
  • How to Undo Subversion commit
  • sigprocmask during signal's execution
  • How do you access podcasts in WP7?
  • HTTPS + gzip: Is it a security vulnerability if I only gzip non-sensitive files?
  • yii2 create translated URLs
  • Numpy: How to get rid of the minima along axis=1, given the indices - in an efficient way?
  • Touch events over two dom elements?
  • Index.php as custom error page
  • read values from form post in jquery or javascript
  • Security issues with PHP's Readfile method
  • Unable to get column index with table.getColumn method using custom table Model
  • onBackPressed() not being executed
  • How can I sort a a table with VBA with given text condition?
  • Transactional Create with Validation in ServiceStack Redis Client
  • Why Encoding.ASCII != ASCIIEncoding.Default in C#?
  • Hardware Accelerated Image Scaling in windows using C++
  • one Local Olampyad Questions on Informatic in 2011
  • Get one-time binding to work for ng-if
  • Different response to non-authenticated users and AJAX calls
  • Volley JsonObjectRequest send headers in GET Request
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • Importing jscolor library in angular 2
  • Why is the timeout on a windows udp receive socket always 500ms longer than set by SO_RCVTIMEO?
  • Web-crawler for facebook in python
  • Delete MySQLi record without showing the id in the URL
  • Unit Testing MVC Web Application in Visual Studio and Problem with QTAgent
  • KeystoneJS: Relationships in Admin UI not updating
  • Suggestions to manage Login/Logout transitions
  • Understanding cpu registers
  • How do I configure my settings file to work with unit tests?
  • embed rChart in Markdown
  • Easiest way to encapsulate a HTML5 webpage into an android app?
  • Programmatically clearing map cache
  • How to get NHibernate ISession to cache entity not retrieved by primary key
  • How can I use `wmic` in a Windows PE script?
  • Unable to use reactive element in my shiny app
  • Net Present Value in Excel for Grouped Recurring CF
  • How do I use LINQ to get all the Items that have a particular SubItem?