联系表格中的Ajax错误

Question

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 = "[e-mail]";
$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";
}

?>

Answer 1

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>