send mail show bootstrap alert ajax

Question

I wanted to do so that when we send an email through the contact form it sends the email and there is a bootstrap alert that comes out email sent. there you can see all my code html: https://jsfiddle.net/6rfeas35/ and this is my php code in

AJAX JQuery in 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>

contact.php

 <?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 = '73.auto.73@gmail.com';
    $mail->Password = 'rlylecrtuvztqosz';
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS;            //Enable implicit TLS encryption
    $mail->Port = 465;      
    $mail->setFrom('73.auto.73@gmail.com');

    $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 bootstrap alert goes out but the email is not sent, I don't understand why. if I remove the ajax jquery code the email is sent but it opens a blank page where it says success, how can I do so that there is the sending of email and the bootstrap alert?

Answer 1

Since you're checking if isset($_POST["send"]) in the contact.php file, you have to ensure that an input with name="send" exist in the form in the index.php file.

• Add name="send" to a hidden field in the form and remove it from the submit button.

index.php

https://jsfiddle.net/r1jwn8kb/

contact.php

<?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 = '73.auto.73@gmail.com';
    $mail->Password = 'rlylecrtuvztqosz';
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS;            //Enable implicit TLS encryption
    $mail->Port = 465;      
    $mail->setFrom('73.auto.73@gmail.com');

    $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";
    die;
}