联系表中的 Ajax 错误

Question

在通过联系表单提交数据而不是显示成功的弹出窗口时，它会重定向到 mail.php 并回显成功。我想在成功提交表单时显示 div id 成功，或者如果提交错误则显示错误弹出 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 .= "\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){
   echo "success";
}else{
    echo "error";
}

?>

Answer 1

你还有action="mail.php"。你应该删除它。这就是导致您的页面重定向的原因。

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

Answer 2

一个不相关的问题： - 您正在连接电子邮件 php 中的 $Body 文本，但您没有先定义它。你应该有

$Body = "";

然后你可以连接到它。

或者 - 只需从名称声明开始并从中构建。

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

您还应该清除其中的<?php 声明之前的空格。您应该在将输入传递到电子邮件之前对其进行清理。

如果您想重定向到电子邮件部分末尾所示的成功页面 - 那么使用 AJAX 是多余的。使用 AJKAX 的唯一原因是允许在不加载相同页面或新页面的情况下进行表单提交和响应。因此，如果您打算重定向 - 只需进行常规表单提交。国际海事组织。

Answer 3

您必须在 submitHandler 中使用 $(form).ajaxSubmit(); 或在 submitHandler 末尾使用 return false; 以防止表单提交的正常行为。

查看jQuery validate插件了解更多详情。

防止默认行为的示例代码：

     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; 
            }