I’m trying to post some data via jQuery Ajax to a PHP form handler file. It was working earlier, but I wasn’t getting errors when I should have (ie it was always sending an email), so I modified the mess out of my stuff and now the PHP file is no longer receiving the serialized data. Would greatly appreciate some eyes on this. I have a feeling it’s a stupid syntax error, but I’m not seeing it.
JS (jQuery)
$form.submit(function(e) {
e.preventDefault();
var data = $(this).serialize(),
url = $(this).attr('action');
console.log(data);
$(this).addClass('sending');
$.ajax({
url: url,
type: 'GET',
async: true,
dataType: 'json',
data: data,
success:
function(response) {
console.log("Success: " + data);
if(!response.success) {
formError(response);
} else {
// on success
console.log(`✔ Form submission successful!`);
console.log(response);
// Add success message
$form.append(
'<div class="success-message"><h3>Your Message Was Sent</h3><p>'
+
successMsg
+
'</p></div>'
).delay(10)
.queue(function(){
$(this).find('.success-message').addClass('visible');
$(this).dequeue();
});
$form
.delay(10)
.queue(function() {
$(this)
.removeClass('sending')
.addClass('sent')
.dequeue();
});
$form[0].reset();
}
},
error:
function(xhr, status, error){
console.log("Fail: " + data);
formError(xhr, status, error);
}
});
function formError(xhr, status, error) {
//on failure
console.log('✘ Form submission failed.');
console.log(xhr);
console.log(status);
console.log(error);
if (!$form.hasClass('error')) {
$form
.addClass('error')
.delay(2000)
.queue(function() {
$(this)
.removeClass('error')
.removeClass('sending')
.dequeue();
});
}
};
});
PHP Handler
<?php
$errors = '';
$myemail = '#####';//<-----Put Your email address here.
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$company = $_POST['company'];
$subject = $_POST['subject'];
$message = $_POST['message'];
$data = array($name, $email, $phone, $company, $subject, $message);
if(
empty($name) ||
empty($email) ||
empty($phone) ||
empty($company) ||
empty($message)
) {
$errors .= "\n You must fill out required fields.";
}
if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i",
$email))
{
$errors .= "\n Invalid email address.";
}
if( empty($errors) ) {
$to = $myemail;
$email_subject = "Contact Form: $name";
$email_body = "<html><body>".
"<p>Name: $name<br>".
"<p>Company: $company<br>".
"Email: $email<br>".
"Phone: $phone<br></p>".
"<p><b>Subject:</b></p>".
"<p>$subject</b></p>".
"<p><b>Message:</b></p>".
"<p>$message</p>".
"</body></html>";
$headers = "From: $myemail\r\n";
$headers .= "Reply-To: $email\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
mail($to,$email_subject,$email_body,$headers);
echo json_encode(array("success" => true, "data" => $data));
} else {
echo json_encode(array("success" => false,"error" => $errors, "data" => $data));
}
?>
The PHP handler is returning data so that I can see what's going on, and then I'm console logging it. Here's what I'm getting:
{success: false, error: "↵ You must fill out required fields.↵ Invalid email address.", data: Array(6)}
data: (6) [null, null, null, null, null, null]
error: "↵ You must fill out required fields.↵ Invalid email address."
success: false
__proto__: Object
In other words, the data isn't actually passing to the PHP file. I'm assuming I have some stupid syntax error, but I'm not seeing it. Help! 🙏🏼
