Sending e-mail using PHP and AJAX not working

Question

I've a contact form on my website. I want my form to send emails using PHP mail() function without loading the page. I've tried AJAX but my form submission isn't working. I've added my HTML code, AJAX code, and PHP code. What'd the right code? Can anyone please help me to solve this. I've tried from many reference sources from google but found no solution.

$(function() {
  $("#ContactNorthstarHHC").submit(function(e) {
    e.preventDefault();
    var form_data = $(this).serialize();
    $.ajax({
        type: "POST",
        url: "ContactNorthstarHHC.php",
        dataType: "json",
        data: form_data,
      })
      .done(function(data) {
        $("#response").html("Thanks for your message.");
        $("#response").addClass("alert alert-success");
      })
      .fail(function(data) {
        $("#response").html("Sorry! Message not sent.");
        $("#response").addClass("alert alert-danger");
      });
  });
});

<form name="ContactNorthstarHHC" id="ContactNorthstarHHC" method="POST">
  <div class="form-group mb-4">
    <input type="text" name="fullName" class="contact-input form-control" placeholder="Full Name" required>
  </div>
  <div class="form-group mb-4">
    <input type="email" name="emailAddr" class="contact-input form-control" placeholder="Email Address" required>
  </div>
  <div class="form-group mb-4">
    <input type="text" name="phoneNo" class="contact-input form-control" placeholder="Phone no" required>
  </div>
  <div class="form-group mb-4">
    <select class="contact-input form-control custom-select" name="Gender" required>
      <option value="">Gender</option>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
      <option value="Other">Other</option>
    </select>
  </div>
  <div class="form-group mb-4">
    <input type="text" name="Message" class="contact-input form-control" placeholder="Enter Your Massage" required>
  </div>
  <div class="form-group mb-4 text-center">
    <input type="submit" class="text-white site-btn btn py-2 px-5" value="Contact Now" name="ContactNow">
  </div>
  <div id="response"></div>
</form>

PHP

<?php
    if($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["ContactNow"])){
        $cont_name = cont_data($_POST['fullName']);
        $cont_mail = cont_data($_POST["emailAddr"]);
        $cont_phon = cont_data($_POST['phoneNo']);
        $cont_gndr = cont_data($_POST["Gender"]);
        $cont_msg = cont_data($_POST["Message"]);

        if(isset($cont_name) && isset($cont_phon) && isset($cont_mail) && isset($cont_gndr) && isset($cont_msg)){
            $to = 'mazumdernazmul00@gmail.com';
            $subject = 'Contact request from' . $cont_mail;
            $message = "$cont_name\n $cont_mail\n $cont_phon\n $cont_gndr\n $cont_msg";
            $headers  = "Content-type: text/html; charset=utf-8 \r\n"; 
            $headers .= "From: $cont_mail\r\n"; 

            mail($to, $subject, $message, $headers);
            echo json_encode(array('status' => 'success'));

        }else{
            echo json_encode(array('status' => 'error'));
        }
    }

    function cont_data($data){
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        return $data;
    }
?>

Answer 1

When you submit the form in JavaScript, it's send with the form method (POST) to the server. The data includes all of your input values. In this case, the 'submit' input is not "clicked" and therefore not send with the request. So you don't have to check for the submit, means:

<?php
if($_SERVER["REQUEST_METHOD"] == "POST"){ // <-- remove  '&& isset($_POST["ContactNow"])'