I'm trying to set up an email sending feature via a contact form. I want it to send the email and display a Bootstrap alert confirming that the email has been sent. Below is the HTML code: https://jsfiddle.net/6rfeas35/. Additionally, here is my PHP code within the AJAX JQuery at the bottom of index.php:
<script>
AOS.init();
$(document).ready(function(){
$('#contactForm').submit(function(e){
e.preventDefault();
const $this = $(this);
// disable submit button
const $button = $(this).find('button[type="submit"]').text('Submit...').attr('disabled', 'disabled');
// send message
$.ajax({
type: 'POST',
url: 'contact.php',
data: $this.serialize(),
success: function(data){
alert("E-mail envoyé avec succès ! Merci pour votre message ! Une réponse vous sera apportée dans les plus brefs délais.");
$this[0].reset(); // reset form
},
error: function(jqXHR, textStatus, errorThrown){
alert('An error occurred. Please try again')
},
complete: function(jqXHR, textStatus){
// enable submit button
$button.text('Submit').removeAttr('disabled');
}
})
})
})
</script>
Here's the contact.php code:
<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require 'PHPMailer/src/Exception.php';
require 'PHPMailer/src/PHPMailer.php';
require 'PHPMailer/src/SMTP.php';
if(isset($_POST["send"])){
$body = $_POST['message'];
$name = $_POST['name'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$mail = new PHPMailer(true);
$mail->isSMTP();
$mail->Host = 'smtp.gmail.com';
$mail->SMTPAuth = true;
$mail->Username = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="271014094652534809101467404a464e4b0944484a">[email protected]</a>';
$mail->Password = 'rlylecrtuvztqosz';
$mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS; //Enable implicit TLS encryption
$mail->Port = 465;
$mail->setFrom('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5463677a3521203b7a6367143339353d387a373b39">[email protected]</a>');
$mail->addAddress($_POST["email"]);
$mail->isHTML(true);
$mail->Subject = 'Projet web';
$mail->Body = "Message:" . $body . "<br>Phone number: " . $phone . "<br>Name: " . $name . "<br>Mail: " . $email;
$mail->send();
echo "success";
}
The issue I'm facing is that the bootstrap alert pops up but the email is not being sent. I can't figure out why this is happening. If I remove the AJAX jQuery code, the email gets sent but it opens a blank success page. How can I make sure both the email is sent and the Bootstrap alert is displayed simultaneously?