jQuery how to manage HTML form action attribute executing - php

Question

I need to validate a HTML form before executing the action attribute. But it gives me a hard time.
Please see the comment in the else statement, and the comment after returning false for an explanation of this issue
$(document).ready(function(){
$("#ajax-payment-form").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: templateDir+"/payment_form/payment_process.php",
data: str,
success: function(msg) {
// Message Sent - Show the 'Thank You' message and hide the form
if(msg == 'OK') {
alert("success");
} else {
event.preventDefault(); // I have tried with or without this method
alert("fail");
}
}
});
return false; // when return false, the action will not execute. If false is removed the action will execute, even if event.precentDefault(); is called in the else statement.**
});
});
Thanks for your time,
Troels

Answer 1

Your ajax call is asynchronous. This means that this function is executed, and it doesn't wait for a response from the function before it proceeds forward. This means that return false; will always fire before the result of the ajax function returns to you. Given your current circumstances, the easiest thing to do is call this.submit() from within the success function, but always return false; under the default scenario. This will avoid recursion, and also the asynchronous call won't be problematic anymore.
$(document).ready(function(){
$("#ajax-payment-form").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: templateDir+"/payment_form/payment_process.php",
data: str,
context: this, //needed to tell the ajax function that "this" belongs to the form, not the ajax call.
success: function(msg) {
// Message Sent - Show the 'Thank You' message and hide the form
if(msg == 'OK') {
alert("success");
this.submit(); //it's magic, john.
} else {
//no reason to prevent the default, as the form will automatically return false anyway.
alert("fail");
}
}
});
return false; //just leave this right here.
});
});

Answer 2

The issue is two fold: event is not declared in your function call, and that you are not submitting the form upon the success funtion. The logic of your submit event should be as follow:
Listen to submit event on the <form> element.
Prevent default form actions first, using e.preventDefault()
Make AJAX call. Depending on the outcome of the returned data, determine whether to proceed with submitting the form. I strongly suggest not using the deprecated jqXHR.success function, but the deferred functions jqXHR.done() or jqXHR.fail().
Also, you can always use console.log() to check your script, instead of relying on alert() which blocks downstream code execution. Here's the code:
$(function(){
$("#ajax-payment-form input[type='submit']").click(function(e) {
// Prevent form submission
e.preventDefault();
// Serialize data, make AJAX call
var str = $(this).closest('form').serialize();
$.ajax({
type: "POST",
url: templateDir+"/payment_form/payment_process.php",
data: str,
context: this // So that you can use $(this) later
}).done(function(msg) {
// If a response is received from your server
if(msg == 'OK') {
console.log('Validation passed, will submit form');
$(this).closest('form').submit();
} else {
console.log('Validation failed, will not do anything more');
}
}).fail(function() {
// Catch ajax errors here
console.log('AJAX error');
});
});
});