联系表格中的Ajax错误

On submitting data via contact form instead of showing popup windows of success its redirecting to mail.php and echo success. I want to show the div id success on successfully submission of form or if submission error then it will show error popup div.

HTML:

    <form id="contact_form" method="post" class="form-horizontal js-ajax-form" action="mail.php">
                        <div class="col-md-10 col-sm-12 col-xs-12 col-md-offset-1" style="padding-bottom: 20px;">
                            <input type="text" class="form-control" name="name" placeholder="Name">
                        </div>
                        <div class="col-md-10 col-sm-12 col-xs-12 col-md-offset-1" style="padding-bottom: 20px;">
                            <input type="text" class="form-control" name="email" placeholder="Email">
                        </div>
                        <div class="col-md-10 col-sm-12 col-xs-12 col-md-offset-1" style="padding-bottom: 20px;">
                            <input type="text" class="form-control" name="subject" placeholder="Subject">
                        </div>
                        <div class="col-md-10 col-sm-12 col-xs-12 col-md-offset-1" style="padding-bottom: 20px;">
                            <textarea class="form-control" name="message" rows="8" placeholder="Message"></textarea>
                        </div>
                        <div class="col-md-10 col-sm-12 col-xs-12 col-md-offset-1" style="padding-bottom: 20px;">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>



  <div id="success" class="modal modal-message fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <span class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></span>
            <h2 class="modal-title">Thank you</h2>
            <p class="modal-subtitle">Your message is successfully sent...</p>
          </div>
        </div>
    </div>
  </div>



  <div id="error" class="modal modal-message fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <span class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></span>
             <h2 class="modal-title">Sorry</h2>
            <p class="modal-subtitle"> Something went wrong </p>
          </div>
        </div>
    </div>
  </div>

JS:

    ( function($) {
  'use strict';
if ($('.js-ajax-form').length) {
        $('.js-ajax-form').each(function(){
            $(this).validate({
                errorClass: 'error wobble-error',
                submitHandler: function(form){
                    $.ajax({
                        type: "POST",
                        url:"mail.php",
                        data: $(form).serialize(),
                        success: function() {
                            $('.modal').modal('hide');
                            $('#success').modal('show');
                        },

                        error: function(){
                            $('.modal').modal('hide');
                            $('#error').modal('show');
                        }
                    });
                }
            });
        });
    }
})(jQuery);

PHP:

    <?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];

$EmailTo = "emailaddress@test.com";
$Subject = "New Message Received";

// prepare email body text
$Body .= "Name: ";
$Body .= $name;
$Body .= "
";

$Body .= "Email: ";
$Body .= $email;
$Body .= "
";

$Body .= "Message: ";
$Body .= $message;
$Body .= "
";

// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);

// redirect to success page
if ($success){
   echo "success";
}else{
    echo "error";
}

?>

You still have action="mail.php". You should remove it. This is what's causing your page to redirect.

<form id="contact_form" method="post" class="form-horizontal js-ajax-form" <!-- action="mail.php" -->></form>

You have to use $(form).ajaxSubmit(); in submitHandler or use return false; at the end of submitHandler to prevent normal behavior of form submission.

Check jQuery validate plugin for more details.

Example code to prevent default behavior:

     submitHandler: function(form){
                $.ajax({
                    type: "POST",
                    url:"mail.php",
                    data: $(form).serialize(),
                    success: function() {
                        $('.modal').modal('hide');
                        $('#success').modal('show');
                    },

                    error: function(){
                        $('.modal').modal('hide');
                        $('#error').modal('show');
                    }
                });
              // This "return false" is the key to prevent form submission
              // We prevent submission because Ajax has handled data
              return false; 
            }

an unrelated issue : - you are concatenating the $Body text in the email php but you have not defined it first. You should have

$Body = "";

and then you can concatenate to it.

alternatively - just start off with the name declaration and build from that.

$Body  = "Name: " . $name . "
"; 
$Body .= "Email: " . $email . "
";
$Body .= "Message: " . $message ."
";

Also you should clear the whitespace before the <?php declaration in it. and you should sanitize your inputs before passing them into the email.

And if you are wanting to redirect to a success page as indicated at the end of the email section - then using AJAX is redundant. The only reason for using AJKAX is to allow the form submission and response to occur without loading the same or a new page. Therefore if you are planning on redirecting - just do a regular form submission. IMO.