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

您必须在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; 
            }

Answer 3

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

$Body = "";

然后你可以连接到它。

或者 - 从名称声明开始，然后从中构建。

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

此外，您应该在<?php声明之前清除空白。并且您应该在将输入传递到电子邮件之前对其进行清理。

如果您想要重定向到电子邮件部分末尾所示的成功页面 - 那么使用AJAX是多余的。使用AJKAX的唯一原因是允许表单提交和响应发生而不加载相同或新页面。因此，如果您计划重定向 - 只需进行常规表单提交。 IMO。

联系表单中的Ajax错误

3 个答案: