Here is my code that sends a form via AJAX and then is meant to display a message back to the user
var postValues = {
name: $($nameObject).val(),
email: $($emailObject).val(),
message: $($messageObject).val(),
form: $(this).find('input[name=form]').val()
};
var form = this;
$.post(config.basePath + 'contact/', postValues, function(data) {
// get json here and make sure it sent
console.log('done request!');
console.log(data.success);
var $statusObject = $(form).find('.status-message');
if (data.success) {
console.log(data.message);
$statusObject.removeClass('failed').text(data.message);
setTimeout(function() {
$statusObject.fadeOut(1500).remove();
$(form).find('input[type=text], textarea').val('');
$(form).find('button[type=submit]').removeAttr('disabled').parent('div').removeClass('sending');
}, 1500);
} else { // error with ajax
$statusObject.addClass('failed').text(data.message);
$(form).find('button[type=submit]').removeAttr('disabled');
}
}, 'json');
return false;
});
Firebug says that the JSON being returned is
{"success":true,"messsage":"Sent successfully"}
I can easily get the value of data.success
, but whenever I try and access data.message
it is set to 'undefined'.
However, when I do
console.log(data)
I get the correct output into Firebug:
Object success=true messsage=Sent successfully
What sounds like the cause of this? It's driving me a bit insane!
Thanks in advance for any help.