PHP form sending email with Ajax blocking

[Jen2002]

Hello, I'm starting with PHP, and I was working on a personnal project using AJAX.

Here is my simple  HTML form with 3 fields and a button, I was hopping sending email and giving the user the feedback without refreshing the page:

**************************************************************************

<!-- Contact Form -->
<form action="" method="post" id="ContactFrm">
           <div class="form-group">
                  <input id="name" type="text" class="form-control-input" placeholder="Name" name="Name" required>
           </div>
           <div class="form-group">
                   <input id="email" type="email" class="form-control-input" placeholder="Email" name="Email" required>
            </div>
                   <div class="form-group">
             <textarea id="message" class="form-control-textarea" placeholder="Message" name="Message" required></textarea>
                    </div>
              <div class="form-group">
                     <button id="submitBtn" type="button" class="form-control-submit-button" name="submit" value="submit">Submit</button>
               </div>
     </form>
                   
    <center><div id="feedback" class="form-control-input"></div></center>

**************************************************************************

Here is the script in the head section:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script>
        $(document).ready(function () {
            $('.submitBtn').click(function (e) {
                e.preventDefault();
            
                $.ajax
                    ({
                        type: "POST",
                        url: "mail_handler.php",
                        data: $('ContactFrm').serialize(),
                        success: function (html) {
                            alert('form was submitted');
                            //$('#ContactFrm')[0].reset();
                        }
                    });
            });
        });
    </script>

***************************************************************

And finally this is my mail_handler.php using PHPMailer wich works fine until I added the Ajax part calling the PHP:

<?php

error_reporting(E_ALL); ini_set('display_errors', 1);

#load phpmailer
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
use PHPMailer\PHPMailer\SMTP;

require 'vendor/Exception.php';
require 'vendor/PHPMailer.php';
require 'vendor/SMTP.php';

#Receive user input
 $name = $_POST['name'];
 $email = $_POST['email'];
 $message = $_POST['message']; 

$mail = new PHPMailer();
$mail->IsSMTP();
$mail->SMTPDebug = 1;

$mail->Host = 'mail.jelaweb.com';
$mail->Port = 587;
$mail->SMTPSecure = 'tls'; 
$mail->SMTPAuth = false; 
$mail->From = $email;               
$mail->AddAddress('info@jelaweb.com');
$mail->Subject    =  "Hello";                      
$mail->Body = $message;                 
$mail->IsHTML(false);        

if (!$mail->send()) 
    {
      echo $mail->ErrorInfo;
      echo"<p>The mail() function failed.</p>";
    }
else
    {
      echo"<p>Email Sent !!!</p>\n";
    }
?>

*************************************************************

For some unknown reasons the call do not transfer fileds values to php, giving the error : PHP Notice:  Undefined index: for name, email and message.

I've been working for a while on this bug and tried a lot of things but can't get the message in the feedback section of the form.

Thanks in advance for nay help.

 

[requinix]

What is the exact name of the input fields?

[Jen2002]

Thanks !

[ginerjm]

Another good reason to avoid using mixed cases in your php code (and html).