送信ボタンがHTMLとJavaScriptで機能しない

Question

送信ボタンをクリックしようとすると、何も起こりません。

私はボタンを変更しようとしましたが、これは問題ではないかと思います。

JavaScriptのコード：

$('#contactForm').submit(function() { 

     $.ajax({ 
      type: "POST", 
      url: "php/contact.php", 
      data: $('#contactForm').serialize(), 
      success: function (msg) { 
       if (msg == 'SEND') { 
        $('.success').fadeIn(); 
        $('.error').fadeOut(); 
        $('#contactForm')[0].reset(); 
       } else { 
        $('.success').fadeOut(); 
        $('.error').fadeIn().find('h3').text(msg); 
       } 
      } 
     }); 
     return false; 
    }); 

HTMLコードは：あなたは私を助けてください可能性がある場合

<div> 
      <h2 class="small-heading">CONTACT US</h2> 

      <div class="contact-form col-sm-11 clearfix"> 

       <form action="contact-complete.php" id="contactForm" method="post" name="contactForm"> 
        <fieldset> 
         <div class="col-sm-12"> 
          <input id="name" name="name" placeholder="Your Name*" type="text" value=""> 
         </div> 


         <div class="col-sm-12"> 
          <input id="email" name="email" placeholder="Your Email*" type="text" value=""> 
         </div> 

         <div class="col-xs-12"> 
          <textarea cols="5" id="message" name="message" placeholder="Your Message....*"></textarea> 
         </div> 

         <div class="col-xs-12"> 
          <button type="submit" form="contactForm" class="submit active">SEND</button> 

         </div> 

         <div class="error col-xs-12"> 
          <h3></h3> 
         </div> 

         <!-- Error Message [ END ] --> 

         <div class="success col-xs-12" id="update"> 
          <h3>Success! Your message was sent.</h3> 
         </div> 

         <!-- Submit Button [ END ] --> 

        </fieldset> 
       </form> 

       <!-- Contact Form [ END ] --> 

      </div> 
     </div> 

これははるかに高く評価されるだろう。

ご協力いただきありがとうございます。アクションを持っていて、これはAJAX内の問題であるように思わそれを聞くのいずれか

<button type="submit" form="contactForm" class="submit active" OnClick="submit()">SEND</button> 

またはJS

Answer 1

あなたのボタンコール。私は「偽を返す」を取り除いた。コードからそれは動作するように見えました。しかし、それは情報を2回送っていた。だから私はAJAXコードを一括して削除したところ、PHPのmail（）スクリプトにリダイレクトするだけでうまくいきました。

ご協力いただきありがとうございます。

Answer 2

にIDを追加し、そのために聞くのドントdoesntの

Answer 3

successとして送信されたもの（カスタムデータ検証）に基づいて呼び出しをレンダリングするカスタムPHPアプリケーションロジック以外に、$.ajax()呼び出し自体が成功するかどうかは関係ありません。

それでも、200+の範囲のステータスコードでコールが返された場合は、success fulであり、success関数が実行されます。 status codeが300を超えるとエラーとなり、$.ajax()のerror機能が実行されます。

XHRのほとんどの時間、故障（ajax）のコールは、リクエストの処理中に発生したphpエラーが原因で、内部サーバーエラーへの単純な404秒からunathorized要求にエラーのいずれかのタイプ（、することができます。

へ何が起こっているかについての詳細を知っている、あなたの$.ajaxコールにerror処理機能を追加します。

$.ajax({ 
    ... 
    error: function(response) { 
    console.log(response); 
    } 
}); 

あなたがいないconsole.log()あなたの応答を行う場合でも、ほとんどのブラウザは、あなたがすべてのネットワーク活動、includiをログに記録することができますのでご注意ください開発者ツールでのXHR要求と応答。名前、ステータス、サイズ、時間を表示することができます。また、クリックした後、送信されたリクエストヘッダ、応答のプレビューとビュー（存在する場合）、詳細なタイミングを表示することもできます。

Chromeで上記の詳細を表示するには、開発ツールを開いて[ネットワーク]タブに移動し、XHRをクリックする必要があります。他の多くのデバッグツールと同様、Networkはデベロッパーコンソールを開いているときにのみ記録するので、ツールを開いて$.ajax()を送信して記録する必要があります。

XHRがエラーを返さない場合は、PHPコードをデバッグしてみてください。$_REQUESTオブジェクトを返すことによって、$.ajax呼び出しを処理する関数の最初の行から開始します。あなたがあなたのページに戻ったら、あなたは正しい道を歩いています。エラーが見つかるまで、あなたのスクリプトのデバッグを続けてください。構造化されたデータを送信できるので、応答をjsonとしてエンコードするのが一般的な方法です。