Jquery Ajax mail form showin php code in form body on submit

Question

I'm building a send mail form with bootstrap, jquery and ajax.

WhenI hit the submit button the whole PHP code appears below the submit button ( see image )

it is obvious that there is something wrong here, but I'm not able to find where it is wrong.

Can someone here help me finding where my form is wrong. And obviously it is not sending the mail.

I have tried to search for solution here on stack overflow and google, but I still haven't found the solution.

here is the process.php

    <?php
$errorMSG = "";
// NAME
if (empty($_POST["name"])) {
    $errorMSG = "Name is required ";
} else {
    $name = $_POST["name"];
}
// EMAIL
if (empty($_POST["email"])) {
    $errorMSG .= "Email is required ";
} else {
    $email = $_POST["email"];
}
// MESSAGE
if (empty($_POST["message"])) {
    $errorMSG .= "Message is required ";
} else {
    $message = $_POST["message"];
}
$EmailTo = "somemai2@gmail.com";
$Subject = "New Message Received";
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success && $errorMSG == ""){
   echo "success";
}else{
    if($errorMSG == ""){
        echo "Something went wrong :(";
    } else {
        echo $errorMSG;
    }
}
?>

here is the script.js

    $("#contactForm").on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        // handle the invalid form...
        formError();
        submitMSG(false, "Did you fill in the form properly?");
    } else {
        // everything looks good!
        event.preventDefault();
        submitForm();
    }
});


function submitForm(){
    // Initiate Variables With Form Content
    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();

    $.ajax({
        type: "POST",
        url: "php/process.php",
        data: "name=" + name + "&email=" + email + "&message=" + message,
        success : function(text){
            if (text == "success"){
                formSuccess();
            } else {
                formError();
                submitMSG(false,text);
            }
        }
    });
}

function formSuccess(){
    $("#contactForm")[0].reset();
    submitMSG(true, "Message Submitted!")
}

function formError(){
    $("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        $(this).removeClass();
    });
}

function submitMSG(valid, msg){
    if(valid){
        var msgClasses = "h3 text-center tada animated text-success";
    } else {
        var msgClasses = "h3 text-center text-danger";
    }
    $("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}

and here is the index.html

    <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <title>Contact form using Bootstrap 3.3.4</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta charset="utf-8">
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/animate.css">
</head>
  <body style="background-color: #7e7e7e">
  <div class="row">
  <div class="col-sm-6 col-sm-offset-3">
      <div class="well" style="margin-top: 10%;">
      <h3>Send me a message</h3>
      <form role="form" id="contactForm" data-toggle="validator" class="shake">
          <div class="row">
              <div class="form-group col-sm-6">
                  <label for="name" class="h4">Name</label>
                  <input type="text" class="form-control" id="name" placeholder="Enter name" required data-error="NEW ERROR MESSAGE">
                  <div class="help-block with-errors"></div>
              </div>
              <div class="form-group col-sm-6">
                  <label for="email" class="h4">Email</label>
                  <input type="email" class="form-control" id="email" placeholder="Enter email" required>
                  <div class="help-block with-errors"></div>
              </div>
          </div>
          <div class="form-group">
              <label for="message" class="h4 ">Message</label>
              <textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
              <div class="help-block with-errors"></div>
          </div>
          <button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
          <div id="msgSubmit" class="h3 text-center hidden"></div>
          <div class="clearfix"></div>
      </form>
      </div>
  </div>
  </div>

  </body>
  <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="js/scripts.js"></script>
  <script type="text/javascript" src="js/validator.min.js"></script>

</html>

Jquery Ajax mail form showin php code in form body on submit

0 Answers0