I am trying to create a contact form that collects a name, email, message type and message from a form. So far the validation of the fields, getting the information and sending the email all work correctly. The main problem I can’t seem to fix is that once the information is submitted There is suppose to be a success message that is shown once the email is sent. This is where my problem is.
Here is the function that is suppose to do all the work.:
JQuery
// make our ajax request to the server
function submitForm(formData) {
$.ajax({
type: 'POST',
url: 'Scripts/send_email.php',
dataType: 'json',
data: formData,
cache: false,
/*timeout: 8000, // timeout after 8 seconds*/
success: function(data,textStatus,XMLHttpRequest) {
$('form #error-div').removeClass('').addClass((data.error === true) ? 'xmark-img' : 'check-img');
if ($('form #error-div').hasClass('check-img')) {
$('form #error-div').addClass('success').html(data.msg).fadeIn('fast');
}
$('form').slideUp().hide();
$('form').find('span').hide();
$('form').find('label').hide();
$('form').find('input').hide();
$('form').find('select').hide();
$('form').find('textarea').hide();
setTimeout($('form #error-div').fadeOut('slow'), 4000);
return true;
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('form #error-div').removeClass('').addClass('xmark-img').addClass('error-box').html('');
$('form #error-div').html('There was an ' + errorThrown +
' error due to a ' + textStatus +
' condition.'+ 'XMLHttpRequest: ' + XMLHttpRequest[0] +
' Error Thrown: ' + errorThrown + '<br/>' +
' textStatus: ' + textStatus + ' <br />msg: '
+ msg + '<br />data: ' + data).fadeIn('fast')
return false;
},
complete: function(XMLHttpRequest, status) {
$('form')[0].reset();
}
});
};
Right now after the form is submitted the error-div shows the sending message animated gif and I do receive the email. But, it does not execute the success or error callback. Using firebug I also get an error “TypeError: data is null”. I’m not sure what I could be doing wrong since the email does get sent.
PHP Script
<?php
sleep(3);
//Sanitize incoming data and store in variable
$name = trim(stripslashes(htmlspecialchars($_POST['name'])));
$email = trim(stripslashes(htmlspecialchars($_POST['email'])));
$message = trim(stripslashes(htmlspecialchars($_POST['message'])));
$message_type = trim(stripslashes(htmlspecialchars($_POST['message_type'])));
$humancheck = $_POST['humancheck'];
$honeypot = $_POST['honeypot'];
if ($honeypot == 'http://' && empty($humancheck)) {
//Validate data and return success or error message
$error_message = '';
$reg_exp = "/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+[\.]{1}[a-zA-Z]{2,4}$/";
if (!preg_match($reg_exp, $email)) {
$error_message .= "You must provide a valid e-mail address <br/>";
}
if (empty($name)) {
$error_message .= "You must include your name <br/>";
}
if (empty($message_type)) {
$error_message .= "You must select a message type for your message. <br/>";
}
if (empty($message)) {
$error_message .= "You must enter a message. <br/>";
}
if (!empty($error_message)) {
$return['msg'] = 'Error: The request was successful but your form is not filled out correctly. '.$error_message;
$return['error'] = true;
exit();
}else {
$ToEmail = "tony.hall@tonyhallportfolio.com";
$EmailSubject_Response = $message_type." from ".$name." (".$email.")";
$mailheader_Response = "From: ".$email."\r\n";
$mailheader_Response .= "To: ".$ToEmail."\r\n";
$mailheader_Response .= "Reply-To: ".$email."\r\n";
$mailheader_Response .= "Content-type: text/html; charset=iso-8859-1\r\n";
$MESSAGE_BODY_Response = "<html><head><link rel='stylesheet' type='text/css' href='http://tonyhallportfolio.com/CSS/email_style.css' /></head><body>";
$MESSAGE_BODY_Response .= "<div class='header'><img src='http://tonyhallportfolio.com/images/logo-ns.png'/></div>\n";
$MESSAGE_BODY_Response .= "<hr/>\n";
$MESSAGE_BODY_Response .= "<div class='content'><h3>E-Mail Message via Tonyhallportfolio.com </h3>";
$MESSAGE_BODY_Response .= "<h4>Name: </h4>".$name."\n";
$MESSAGE_BODY_Response .= "<h4>Email: </h4>".$email."\n";
$MESSAGE_BODY_Response .= "<h4>Message Details: </h4>".nl2br($message)."</div>";
$MESSAGE_BODY_Response .= "<body/><html/>";
mail($ToEmail, $EmailSubject_Response, $MESSAGE_BODY_Response, $mailheader_Response) or die ("Failure");
if($message_type == "Website Inquiry"){
$EmailSubject_Inq = "Conformation of ".$message_type." sent via tonyhallportfolio.com";
$mailheader_Inq = "From: ".$ToEmail."\r\n";
$mailheader_Inq .= "To: ".$email."\r\n";
$mailheader_Inq .= "Reply-To: ".$ToEmail."\r\n";
$mailheader_Inq .= "Content-type: text/html; charset=iso-8859-1\r\n";
$MESSAGE_BODY_Inq = "<html><head><link rel='stylesheet' type='text/css' href='http://tonyhallportfolio.com/CSS/email_style.css' /></head><body>";
$MESSAGE_BODY_Inq .= "<div class='header'><img src='http://tonyhallportfolio.com/images/logo-ns.png'/></div>\n";
$MESSAGE_BODY_Inq .= "<hr/>\n";
$MESSAGE_BODY_Inq .= "<div class='content'>"."<p>Thank you for reaching out to me in order to build a website for yourself or your business. This email confirms that your message has been sent. Please allow me ample time to respond back to you as I may have others inquiring for my services. I will make sure to review the information you sent me and respond in a reasonable amount of time. Thanks again for your inquiry.</p>";
$MESSAGE_BODY_Inq .= "<h3>".$message_type." for Tony Hall via Tonyhallportfolio.com </h3>";
$MESSAGE_BODY_Inq .= "<h4>Name: </h4>".$name."\n";
$MESSAGE_BODY_Inq .= "<h4>Email: </h4>".$email."\n";
$MESSAGE_BODY_Inq .= "<h4>Message Details: </h4>".nl2br($message)."</div>";
$MESSAGE_BODY_Inq .= "<body/><html/>";
mail($email, $EmailSubject_Inq, $MESSAGE_BODY_Inq, $mailheader_Inq) or die ("Failure");
$return['msg'] = '<h3>'.$name.' ,Thank you for your message. </h3>';
$return['error'] = false;
}else{
$EmailSubject_msg = "Conformation of ".$message_type." sent via tonyhallportfolio.com";
$mailheader_msg = "From: ".$ToEmail."\r\n";
$mailheader_msg .= "To: ".$email."\r\n";
$mailheader_msg .= "Reply-To:".$email."\r\n";
$mailheader_msg .= "Content-type: text/html; charset=iso-8859-1\r\n";
$MESSAGE_BODY_msg = "<html><head><link rel='stylesheet' type='text/css' href='http://tonyhallportfolio.com/CSS/email_style.css' /></head><body>";
$MESSAGE_BODY_msg .= "<div class='header'><img src='http://tonyhallportfolio.com/images/logo-ns.png'/></div>\n";
$MESSAGE_BODY_msg .= "<hr/>\n";
$MESSAGE_BODY_msg .= "<div class='content'>"."<p>Thank you for leaving me a message on my E-Portfolio website. This email confirms that your message has been sent. I will make sure to review your message and take your comments and/or suggestions in consideration to help improve the site. Your input is greatly appreciated.</p>";
$MESSAGE_BODY_msg .= "<h3>".$message_type." for Tony Hall via Tonyhallportfolio.com </h3>";
$MESSAGE_BODY_msg .= "<h4>Name: </h4>".$name."\n";
$MESSAGE_BODY_msg .= "<h4>Email: </h4>".$email."\n";
$MESSAGE_BODY_msg .= "<h4>Message Details: </h4>".nl2br($message)."</div>";
$MESSAGE_BODY_msg .= "<body/><html/>";
mail($email, $EmailSubject_msg, $MESSAGE_BODY_msg, $mailheader_msg) or die ("Failure");
$return['msg'] = $name.' ,Thank you for your message.';
$return['error'] = false;
exit();
}
}
}else {
$return['msg'] = 'There was a problem with your submission. Please try again.';
$return['error'] = true;
exit();
}
?>
You’re returning a
$returnarray there, you’ll need to converti it into JSON format before echoing it like this: