聯系表格中的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

您必須使用$(form).ajaxSubmit(); 在SubmitHandler中或使用return false; 在SubmitHandler的末尾，以防止表單提交的正常行為。

檢查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

一個不相關的問題：-您正在將$ Body文本串聯在電子郵件php中，但尚未首先定義它。 你應該有

$Body = "";

然后可以將其連接起來。

或者-只是從名稱聲明開始，然后從中進行構建。

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

另外，您還應該在<?php聲明之前清除空格。 並且您應該先清除輸入內容，然后再將其傳遞到電子郵件中。

而且，如果您希望按照電子郵件部分末尾的指示重定向到成功頁面，則使用AJAX是多余的。 使用AJKAX的唯一原因是允許進行表單提交和響應而無需加載相同頁面或新頁面。 因此，如果您打算重定向-只需定期提交表單即可。 海事組織。