Contact Form Stuck in Validation

I am trying to get a contact form up and running for a portfolio website. I understand design, but have a very limited understanding of development/server side issues.

The form functions as expected, BUT when submitted the form returns “..sending” and things stop there. I do not receive an email, and the status does not progress.

My site is hosted on Hostinger, who does not utilize Apache (of which I have no understanding). However, from what I have read, I do need some type of php server like apache to make this form function. The host says that they do support Ajax and that the emails are not being blocked.

I am trying to use Ajax, with validate script, and php to allow form submission without leaving the current page as follows: (this is a MDB form). This is a link to the hosted site for reference: https://intakt-design.com

I am receiving this error in dev tools: Uncaught reference error: sendMessage() is not defined at validate form

I feel like this is the problem, but I don’t know what goes here, and google is leading me in circles…

code snippet link: https://mdbootstrap.com/snippets/jquery/marcin-luczak/2705367

Please excuse my ignorance, I’m new to web design (graphic design student), in general, and backend development is way over my head.

PHP:

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$subject = $_POST['subject'];
header('Content-Type: application/json');
if ($name === ''){
print json_encode(array('message' => 'Name cannot be empty', 'code' => 0));
exit();
}
if ($email === ''){
print json_encode(array('message' => 'Email cannot be empty', 'code' => 0));
exit();
} else {
if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
print json_encode(array('message' => 'Email format invalid.', 'code' => 0));
exit();
}
}
if ($subject === ''){
print json_encode(array('message' => 'Subject cannot be empty', 'code' => 0));
exit();
}
if ($message === ''){
print json_encode(array('message' => 'Message cannot be empty', 'code' => 0));
exit();
}
$content="From: $name nEmail: $email nMessage: $message";
$recipient = "[e-mail]";
$mailheader = "From: $email rn";
mail($recipient, $subject, $content, $mailheader) or die("Error!");
print json_encode(array('message' => 'Email Delivered! Thanks for contacting inTakt Design!', 'code' => 1));
exit();
?>

HTML:

 <!-- Contact Form -->
      <div class="contact-content py-5">
        <section class="mb-4 col-11 col-sm-10 col-lg-8 mx-auto mt-0 mb-3 form">

            <!--Section heading-->
            <h2 class="h1-responsive font-weight-bold text-center p-3 my-4 form-text form-head">Just Fill in the Blanks!</h2>
            <!--Section description-->
            <p class="text-center w-responsive mx-auto mb-5 form-text form-subhead">Do you have any questions or inquiries? Please do not hesitate to contact me directly.<br />I will typically respond within 24 hours.</p>

            <div class="row">

                <!--Grid column-->
                <div class="col-md-9 mb-md-0 mb-5">
                    <form id="contact-form" name="contact-form">

                        <!--Grid row-->
                        <div class="row">

                            <!--Grid column-->
                            <div class="col-md-6 form-field-containers">
                                <div class="md-form mb-0 form-field-containter">
                                    <input type="text" id="name" name="name" class="form-control">
                                    <label for="name" class="form-text form-field mt-n1">Your name</label>
                                </div>
                            </div>
                            <!--Grid column-->

                            <!--Grid column-->
                            <div class="col-md-6 form-field-containers">
                                <div class="md-form mb-0 form-field-container">
                                    <input type="text" id="email" name="email" class="form-control">
                                    <label for="email" class="form-text form-field mt-n1">Your email</label>
                                </div>
                            </div>
                            <!--Grid column-->

                        </div>
                        <!--Grid row-->

                        <!--Grid row-->
                        <div class="row">
                            <div class="col-md-12 mt-3 form-field-containers">
                                <div class="md-form mb-0 form-field-container">
                                    <input type="text" id="subject" name="subject" class="form-control">
                                    <label for="subject" class="form-text form-field mt-n1">Subject</label>
                                </div>
                            </div>
                        </div>
                        <!--Grid row-->

                        <!--Grid row-->
                        <div class="row">

                            <!--Grid column-->
                            <div class="col-md-12 mt-3">

                                <div class="md-form message-container">
                                    <textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea p-2 message waves-effect"></textarea>
                                    <label for="message" class="form-text form-field mt-n1 message-label"><span class="message-canned-txt italic">Type Your Message Here</span></label>
                                </div>

                            </div>
                        </div>
                        <!--Grid row-->

                    </form>

                    <div class="text-center text-md-left">
                        <a class="btn btn-rounded waves-effect cta-btn-res col-12 col-lg-5 mt-3 mb-0" onclick="validateForm();">Submit</a>
                    </div>
                    <div class="status" id="status"></div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-md-3 text-center">
                    <ul class="list-unstyled mb-0">
                        <li><a href="#connect" class="fas fa-user-astronaut fa-2x form-icon phone waves-effect"></a><br />
                            <a href="#connect" class="form-text contact-info phone waves-effect">Connect with Me!</a>
                        </li>

                        <li><a href="tel:[phone]" class="fas fa-phone mt-4 fa-2x form-icon phone waves-effecte"></a><br />
                            <a href="tel:[phone]" class="form-text contact-info phone waves-effect">+ 501 259 6907</a>
                        </li>

                        <li><a href="mailto:[e-mail]" class="fas fa-envelope mt-4 fa-2x form-icon email waves-effect"></a><br />
                            <a href="mailto:[e-mail]" class="form-text contact-info email waves-effect">[e-mail]</a>
                        </li>
                    </ul>
                </div>
                <!--Grid column-->
            </div>
        </section>
    <!--/ Contact Form-->

JS:

     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>      
      <script type="text/javascript" src="js/jquery-3.5.1.js"></script>
      <script type="text/javascript" src="popper.js"></script>
      <script type="text/javascript" src="js/bootstrap.bundle.js"></script>
      <script type="text/javascript" src="js/mdb.js"></script>
      <script type="text/javascript" src="js/mdb.pro.js"></script>

<!--Custom scripts-->
<script>
  function validateForm() {
  var name =  document.getElementById('name').value;
  if (name == "") {
    document.querySelector('.status').innerHTML = "Name cannot be empty";
    return false;
  }
  var email =  document.getElementById('email').value;
  if (email == "") {
    document.querySelector('.status').innerHTML = "Email cannot be empty";
    return false;
  }        
  else {
    var re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
    if(!re.test(email)){
      document.querySelector('.status').innerHTML = "Email format invalid";
      return false;
    }
  }
  var subject =  document.getElementById('subject').value;
  if (subject == "") {
    document.querySelector('.status').innerHTML = "Subject cannot be empty";
    return false;
  }
  var message =  document.getElementById('message').value;
  if (message == "") {
    document.querySelector('.status').innerHTML = "Message cannot be empty";
    return false;
  }

  document.querySelector('.status').innerHTML = "Sending...";

  sendMessage();
}

function sendMessge() {
  formData = {
    'name'     : $('input[name=name]').val(),
    'email'    : $('input[name=email]').val(),
    'subject'  : $('input[name=subject]').val(),
    'message'  : $('textarea[name=message]').val()
  };

  $.ajax({
    url : "mail.php",
    type: "POST",
    data : formData,
    success: function(data, textStatus, jqXHR)
    {

      $('#status').text(data.message);
      if (data.code) //If mail was sent successfully, reset the form.
        $('#contact-form').closest('form').find("input[type=text], textarea").val("");
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
      $('#status').text(jqXHR);
    }
  });
}
    </script> 

Answer

I don’t know why, but for some unusual reasons the sendMessage is not working. Try to rename the function. messageSending() in your js file and call it in your validateForm() function.

function validateForm() {
  var name =  document.getElementById('name').value;
  if (name == "") {
    document.querySelector('.status').innerHTML = "Name cannot be empty";
    return false;
  }
  var email =  document.getElementById('email').value;
  if (email == "") {
    document.querySelector('.status').innerHTML = "Email cannot be empty";
    return false;
  }        
  else {
    var re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
    if(!re.test(email)){
      document.querySelector('.status').innerHTML = "Email format invalid";
      return false;
    }
  }
  var subject =  document.getElementById('subject').value;
  if (subject == "") {
    document.querySelector('.status').innerHTML = "Subject cannot be empty";
    return false;
  }
  var message =  document.getElementById('message').value;
  if (message == "") {
    document.querySelector('.status').innerHTML = "Message cannot be empty";
    return false;
  }

  document.querySelector('.status').innerHTML = "Sending...";

  messageSending();
}


function messageSending() {
  document.querySelector('.status').innerHTML = "123Sending...";
  formData = {
    'name'     : $('input[name=name]').val(),
    'email'    : $('input[name=email]').val(),
    'subject'  : $('input[name=subject]').val(),
    'message'  : $('textarea[name=message]').val()
  };

  $.ajax({
    url : "mail.php",
    type: "POST",
    data : formData,
    success: function(data, textStatus, jqXHR)
    {

      $('#status').text(data.message);
      if (data.code) //If mail was sent successfully, reset the form.
        $('#contact-form').closest('form').find("input[type=text], textarea").val("");
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
      $('#status').text(jqXHR);
    }
  });
}