0

When the submit button is clicked on the form that I have set up, it goes though the PHP script I have set up fine and delivers the appropriate email. The JS script I have to validate input and AJAX works fine, but only with input validation. The AJAX request isn't returning anything.

Here is my HTML - the contact form. This all works well by itself and everything is inputted.

<form id="contact-form" method="post" action="./scripts/php/contactform.php" role="form">
  <h3 class="h1 text-center">Any questions or feedback? Please let us know here!</h3>
  <div class="row justify-content-center">
    <div class="messages"></div></div>
  <div class="row justify-content-center">
    <div class="form-group col-md-4">
      <label for="inputName">Name</label>
      <input type="text" class="form-control" id="inputName" name="name" placeholder="Name" required="required" data-error="Your name is required.">
      <div class="help-block with-errors"></div>
    </div>
    <div class="form-group col-md-4">
      <label for="inputEmail">Email</label>
      <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" required="required" data-error="A valid email address is required.">
      <div class="help-block with-errors"></div>
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="form-group col-md-8">
      <label for="inputSubject">Subject</label>
      <input type="text" class="form-control" id="inputSubject" name="subject" placeholder="Subject" required="required" data-error="A subject is required.">
      <div class="help-block with-errors"></div>
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="form-group col-md-8">
      <label for="inputMessage">Message</label>
      <textarea class="form-control" id="inputMessage" name="message" placeholder="Message" required="required" data-error="Please enter a message to send to us."rows="5"></textarea>
      <div class="help-block with-errors"></div>
    </div>
    <div class="row justify-content-center">
      <div class="form-group col-md-8 text-center">
        <button class="btn btn-primary btn-block" type="submit" id="submit" name="submit">Submit</button>
      </div>
    </div>
</form>

Here is the PHP script. This also works fine, with a possibility of the AJAX response section at the bottom, although it should work. The data I need to go to the JS script is the $responseArray data in the try/catch blocks.

<?php
    if(isset($_POST["submit"])) {
        // Email variables
        $from = $_POST["email"];
        $to = "mailtoaddress";

        // Other form data
        $name = $_POST["name"];
        $subject = $_POST["subject"];
        $message = $_POST["message"];

        // Fields translated to human-readable English
        $fields = array("name" => "Name", "email" => "Email", "subject" => "Subject", "message" => "Message");

        // Status messages
        $success = "Contact form has been successfully submitted and we will get back to you as soon as possible!";
        $error = "There was an error submitting the form. Please try again later.";

        // To debug turn to "E_ALL & ~E_NOTICE", else 0.
        error_reporting(0);

        try {
            if(count($_POST) == 0) throw new \Exception("Form is empty"); // Throw error if form is empty

            // Email header
            $header = "From: ".$name."<".$from.">\r\n";

            $txt = "You have recieved an email from ".$name." (".$from.") via the website contact form.\n\nMessage: \n".$message; // Compile the message text

            mail($to, $subject, $txt, $header); // Send mail

            $responseArray = array("type" => "success", "message" => $success); // Create the success response

        } catch (\Exception $e) {
            $responseArray = array("type" => "danger", "message" => $error); // Create the response if something failed
        }

        // If requested by AJAX request return JSON response
        if (!empty($_SERVER["HTTP_X_REQUESTED_WITH"]) && strtolower($_SERVER["HTTP_X_REQUESTED_WITH"]) == "xmlhttprequest") {
            $encoded = json_encode($responseArray);

            header("Content-Type: application/json");

            echo $encoded;
        }
        // Otherwise just display the message
        else {
            echo $responseArray["message"];
                header("Location: {$_SERVER["HTTP_REFERER"]}");
        }
    }
?>

And finally, the JS script. Everything just stops working once inside the AJAX request function. It may be a consequence of the PHP response, but I'm not sure.

$(function () {

    // Initialize the validator
    $('#contact-form').validator();

    // On submission
    $('#contact-form').submit(function (e) {
        // If the validator will allow submission
        if (!e.isDefaultPrevented()) {
            var url = "../php/contactform.php";

            $.ajax({
                type: "POST",
                url: url,
                data: $(this),
        dataType: 'json',
                success: function (data) {
          alert('working');
              // Apply the message type
              var messageAlert = 'alert-' + data.type;
              var messageText = data.message;

              // Compose alert HTML
              var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';


              if (messageAlert && messageText) {
                // Inject the alert to .messages div in our form
                $('#contact-form').find('.messages').html(alertBox);

                // Reset form
                $('#contact-form')[0].reset();
              }
                }
            });
            return false;
        }
    })
});

What should happen is that the form data should be sent in an email, which already happens, and then a Bootstrap alert box should pop up replacing the .messages div, which doesn't work. I have tested the alert box and it works fine on its own.

I am also open to different solutions - it doesn't have to be structured specifically this way.

Thank you very much for the help!

Edit: The error is TypeError: $.ajax is not a function. The jQuery input should be fine, but here it is:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
Trifex
  • 178
  • 12

0 Answers0