jqueryの - 私は電子メールを送信するために私のPHPの関数を使用する場合Ajax呼び出し

Question

の私の.htmlから.PHPするページの変更問題

、すべてが素晴らしい作品。しかし、私は、ページをリフレッシュしたくないので、私は次のようにAJAXを使用しています：

reservation.html

<form class="form-horizontal" 
     method="post" 
     action="mailer.php" 
     id="submitForm"> 

    <div class="form-group"> 
     <label for="name" class="cols-sm-2 control-label">Your Name</label> 
     <div class="cols-sm-10"> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span> 
       <input type="text" class="form-control" name="name" id="userName" placeholder="Enter your Name"/> 
      </div> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label for="email" class="cols-sm-2 control-label">Your Email</label> 
     <div class="cols-sm-10"> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span> 
       <input type="text" class="form-control" name="email" id="userEmail" placeholder="Enter your Email"/> 
      </div> 
     </div> 
    </div> 

    <hr style="border-color:black;"> 

    <div class="form-group "> 
     <button id="sendEmailButton" 
       type="submit" 
       class="btn btn-primary btn-lg btn-block login-button" 
       style="background-color:#483D8B;border-color:none;">Register</button> 
    </div> 
</form> 


<script type="text/javascript"> 

    $(document).ready(function(){ 

     $('#submitForm').submit(function(e){ 

      e.preventDefault(); // Prevent Default Submission 

      $.ajax({ 
       url: 'mailer.php', 
       type: 'POST', 
       data: $(this).serialize(), // it will serialize the form data 
       dataType: 'html' 
       }) 
      .done(function(data){ 
      $('#submitForm').fadeOut('slow', function(){ 
        $('#submitForm').fadeIn('slow').html(data); 
       }); 
      }) 
      .fail(function(){ 
       alert('Ajax Submit Failed ...'); 
      }); 
      e.preventDefault(); 
     }); 
    }); 

}); 
</script> 

mailer.php

<?php 

    $theName = $_POST["name"]; 
    $theEmail = $_POST["email"]; 
    $to = $theEmail; 
    $subject = "Hi, ". $theName."!"; 
    $txt = "All the details ... "; 
    $headers = "From: yay@blakes.graduation.com" . "\r\n"; 

    //mail($to,$subject,$txt,$headers); 
?> 

診断

だから、とき送信ボタンを押すと、ページはwww.bmconrad.webutu.com/html/reservation.htmlからwww.bmconrad.webutu.com/html/mailer.phpに変わります。私は見て、私が行方不明であるか、これを行う最善の方法を理解するのを助けることができる誰にとっても、この状態でサイトを稼働させてしまった。任意の/すべての入力をありがとう。

Answer 1

あなたのjavascriptコードに誤りがあります。あなたのjsコードにエラーがあるとき、preventDefault（）は失敗し、フォームは標準的な振る舞いをし、アクションメソッドにリダイレクトします。

最後に余分なものを削除してください。});はうまくいきます。