連絡フォームの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

あなたは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 = "Name: " . $name . "\n"; 
$Body .= "Email: " . $email . "\n"; 
$Body .= "Message: " . $message ."\n"; 

また、あなたはそれで<?php宣言の前に空白をクリアする必要があります。あなたは電子メールにそれらを渡す前にあなたの入力を消毒する必要があります。

また、メールセクションの最後に示されているように成功ページにリダイレクトしたい場合は、AJAXの使用は冗長です。 AJKAXを使用する唯一の理由は、同じまたは新しいページをロードせずにフォームの提出と応答を可能にすることです。したがって、リダイレクトを計画している場合は、通常のフォーム提出を行います。 IMO。