Ajax process PHP form with different results from multiple conditionals - php

Question

I've currently got a working form right now that just uses a conditional to check if it's been submitted and processes the form on the same page: https://gist.github.com/adrianrodriguez/48cd90067a63691adc6a
But obviously the caveat is that it refreshes the page. Which in reality is fine, I just used a little bit of JS to fadeIN the results after the form echos it with
style="display:none"
And that's sorta fine...but I want to spice it up and use ajax.
Below is the js without ajax (just using validation.js for validating)
JS UPDATED WITH ANSWER
$(document).ready(function(){
// Jquery Form Functions
$('#redeem').validate( { // initialize the plugin
rules: {
fullname: {
required: true
},
cardnumber: {
required: true,
digits: true
},
email: {
email: true,
required: true
},
confirmation: {
email: true,
required: true,
equalTo: "#email"
}
},
invalidHandler: function (event, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = "<p>All fields in red must be filled*</p>";
$("#redeem .message").html(message);
$("#redeem .message").show();
} else {
$("#redeem .message").hide();
}
},
submitHandler: function (form) { // for demo
//form.submit();
$.ajax({
url: form.action,
type: form.method,
data: $(form).serialize(),
dataType: "json", // Recognize JSON Data
success: function(data) {
$.each(data, function(key, value) {
// Loop with key and value from conditional
console.log(key + " " + value);
});
}
});
return false;
}
});
if ($('.result')) {
$('.result').fadeIn(400);
}
});
I know how to process with ajax using:
$.ajax({
url: form.action,
type: form.method,
data: $(form).serialize(),
success: function(data) {
console.log(data);
}
});
return false;
And it works fine, but the problem I run into is when I want to echo specific strings based on some of the conditionals in the form.
A) I can't echo the information out since the form is separate from the page it's processed on...
B)...and I don't know how to pull in that information to the current page it's being processed on.
Is this even possible? If so, how? Or do I just need to stay with what I have going on now?
Here is a video of what I have working now (without ajax): http://screencast.com/t/196P9ugso2L and notice how if a page is long it won't feel like the form is being processed real time (instead of refresh). Like I said, in all honestly, I just want to give a better user experience and spice things up.
UPDATE
PHP with array (which I think I am doing wrong, I tried three different ways, all failing noob style).
<?php
include('db-connect.php');
$fullname = $_POST['fullname'];
$email = $_POST['email'];
$cardnumber = $_POST['cardnumber'];
$select = "SELECT * FROM cardholders WHERE cardnumber = $cardnumber";
$selectfrom = mysql_query($select);
if ($info = mysql_fetch_assoc($selectfrom)) {
if ($fullname == $info['name'] && $info['used'] == 0) {
// To send HTML mail, the Content-type header must be set
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
// $headers .= 'CC: $email' . "\r\n";
$headers .= 'From: Comanche Nation Casinos <no-reply#comanchenationcasinos.com>';
$confirmation = '<h1>Hi ' . $info['name'] . ' you\'ve won <b>$' . $info['amount'] . '</b> in Comanche Credit!</h1>
<p>Thank you for being such a valuable C Club member. Print or Show this email and redeem this at your Comanche Nation Casino.</p>
<p>Save this email just incase something happens so that the staff can ensure your reward at the kiosk.</p>';
// mail("web#icgadv.com", "Care Center Gala Sponsorship Request", $staff, $headers);
// mail($email, "Care Center Gala Sponsorship Request Confirmation", $confirmation, $headers);
// $message = "<p>Congratulations!" . $info['name'] . "!</p> <p>You've won! Please check your email for your winnings and futher information.</p>";
$winner = true;
$message = array( 'winner' => true, 'message' => 'This is a test');
$updateUser = "UPDATE cardholders SET email='$email', used=1 WHERE cardnumber = $cardnumber";
$update = mysql_query($updateUser);
} else if ($fullname != $info['name'] && $info['used'] == 0) {
// $message = "Sorry but your name does not match the name in our database.";
$noname = true;
$message = array( 'winner' => true, 'message' => 'This is a test');
} else {
// $string = "<p>Sorry but this offer has already been redeemed to this account</p>";
$redeemed = true;
$message = array( 'winner' => true, 'message' => 'This is a test');
}
} else {
// $message = array( 'status' => true, 'message' => "<p>Sorry but this card number does not exist.</p>" );
$invalid = true;
$message = array( 'winner' => true, 'message' => 'This is a test');
}
echo json_encode($message);
?>

Answer 1

As #TomToms posted above the problem is you need to pass a result back from the Ajax page called, the one processing. As mentioned, you do this using a JSON array. I will give you a brief example of this below:
$.ajax({
url: form.action,
type: form.method,
data: $(form).serialize(),
dataType: "json",
success: function(data) {
console.log(data);
}
});
Note the added dataType, this states you are expecting a JSON string back, and will convert it into an array in data for you.
On you processing page, the form.action you would have this:
// ... code that loads form information and all your current processing.
$example = array(
'prize' => true, // true or false on whether they get the prize.
'status' => 'Show Status Message' // put any message for the show status box here.
);
echo json_encode($example);
Now if you look in console at the end data will be an object with the prize and status in it.
I'd also recommend you have a look through the JSON website for more information on JSON.

Answer 2

If I understand your question correctly what you need is to send back a JSON array with a status code for each field or something along those lines and then parse that in your javascript to warn the user appropriately.

Answer 3

As per documentation, .ajax() always goes inside of the submitHandler callback function.
Replace this...
submitHandler: function (form) { // fires on submit when form is valid
form.submit(); // regular submit action
}
With something like this...
submitHandler: function (form) { // fires on submit when form is valid
$.ajax({
url: $(form).action,
type: $(form).method,
data: $(form).serialize(),
success: function(data) {
console.log(data);
}
});
return false; // block the default form action
}