The Problem
In my was posting a contact form to an outside service, and then redirecting to a page on the same site. I thought, Aha, I will use the handy jquery .post command – it looked something like this.
$.post(“https://www.outsidesite.com/FormSubmit.php”, $(“#myform”).serialize());
window.location.href=’http://www.MySite.com/SomePage/’;
But curiously, half of the time I filled out the form the data did not reach the outside server, and the other half the redirect did not happen.
The Cause
$.post is an asynchronous operation by definition – and cannot be made synchronous.
The Solution
Just use the regular jquery .ajax function, and set async to false
$.ajax({type: ‘POST’, url: “https://www.outsidesite.com/FormSubmit.php”, data: $(“#myform”).serialize(),async:false});
window.location.href=’http://www.MySite.com/SomePage/’;
That’s it, now the browser waits until the submission is complete and everything works as expected.
