I am using a Mailchimp Ajax Submit jQuery Plugin to submit an email using a PHP file on a contact form in a website template I imported to my Angular app. When I go to enter my details on the form and submit, the page refreshes on the POST request.
The console then throws the following two errors.
[Deprecation] Synchronous XMLHttpRequest
[Deprecation] Synchronous XMLHttpRequest
on the main thread is deprecated because of its detrimental effects to the
end user's experience. For more help, check https://xhr.spec.whatwg.org/.
(anonymous) @ polyfills.c5fb4ffca9c225046d5a.js:1
polyfills.c5fb4ffca9c225046d5a.js:1
Uncaught Error: Zone already loaded.
Uncaught Error: Zone already loaded.
at polyfills.c5fb4ffca9c225046d5a.js:1
at polyfills.c5fb4ffca9c225046d5a.js:1
at Object.0TWp (polyfills.c5fb4ffca9c225046d5a.js:1)
at p (<anonymous>:1:507)
at Object.hN/g (polyfills.c5fb4ffca9c225046d5a.js:1)
at p (<anonymous>:1:507)
at Object.5 (polyfills.c5fb4ffca9c225046d5a.js:1)
at p (<anonymous>:1:507)
at n (<anonymous>:1:376)
at e (<anonymous>:1:248)
I am finding it difficult to understand the cause of the problem. I have tried to prevent the page from refreshing on submit using <button type="button">, this does not do a page refresh however it does not call a POST request as expected.
I have also tried un-commenting import 'zone.js/dist/zone'; in polyfills.ts
I wish to accomplish sending the email on the same page without a refresh in the Angular app unless there is a better alternative. (I am learning)
main.js
var clContactForm = function() {
/* local validation */
$('#contactForm').validate({
/* submit via ajax */
submitHandler: function(form) {
var sLoader = $('.submit-loader');
$.ajax({
type: "POST",
url: "inc/sendEmail.php",
data: $(form).serialize(),
beforeSend: function() {
sLoader.slideDown("slow");
},
success: function(msg) {
// Message was sent
if (msg == 'OK') {
sLoader.slideUp("slow");
$('.message-warning').fadeOut();
$('#contactForm').fadeOut();
$('.message-success').fadeIn();
}
// There was an error
else {
sLoader.slideUp("slow");
$('.message-warning').html(msg);
$('.message-warning').slideDown("slow");
}
},
error: function() {
sLoader.slideUp("slow");
$('.message-warning').html("Something went wrong. Please try again.");
$('.message-warning').slideDown("slow");
}
});
}
});
};
sendEmail.php
<?php
// Replace this with your own email address
$siteOwnersEmail = 'my-email';
if($_POST) {
$name = trim(stripslashes($_POST['contactName']));
$email = trim(stripslashes($_POST['contactEmail']));
$subject = trim(stripslashes($_POST['contactSubject']));
$contact_message = trim(stripslashes($_POST['contactMessage']));
// Check Name
if (strlen($name) < 2) {
$error['name'] = "Please enter your name.";
}
// Check Email
if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
$error['email'] = "Please enter a valid email address.";
}
// Check Message
if (strlen($contact_message) < 15) {
$error['message'] = "Please enter your message. It should have at least 15 characters.";
}
// Subject
if ($subject == '') { $subject = "Contact Form Submission"; }
// Set Message
$message .= "Email from: " . $name . "<br />";
$message .= "Email address: " . $email . "<br />";
$message .= "Message: <br />";
$message .= $contact_message;
$message .= "<br /> ----- <br /> This email was sent from your site's contact form. <br />";
// Set From: header
$from = $name . " <" . $email . ">";
// Email Headers
$headers = "From: " . $from . "\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";
if (!$error) {
ini_set("sendmail_from", $siteOwnersEmail); // for windows server
$mail = mail($siteOwnersEmail, $subject, $message, $headers);
if ($mail) { echo "OK"; }
else { echo "Something went wrong. Please try again."; }
} # end if - no validation error
else {
$response = (isset($error['name'])) ? $error['name'] . "<br /> \n" : null;
$response .= (isset($error['email'])) ? $error['email'] . "<br /> \n" : null;
$response .= (isset($error['message'])) ? $error['message'] . "<br />" :
null;
echo $response;
} # end if - there was a validation error
}
?>
