WordpressでAjaxとjQueryカスタムフォームを提出する

Question

私は完全に技術者ではなく、WordPressのカスタムテーマを構築しようとしています。 私は、フォームデータを送信するためにカスタムJSスクリプトを実装する必要があるという点に着いた。私が理解する限り、それはPHPファイルになりますが、今はフロントエンドに集中しています。これはAJAX + jQueryの検証です。 データを送信した後にフォームを更新する必要はありません。すべてが成功したという簡単なメッセージです。

誰でも私が書いたコードを見て、何が間違っているのか教えていただけますか？

PS - そのコードを格納するファイルは、WPテーマに適切に組み込まれており、依存関係としてjQueryが組み込まれています。私はAJAXを実装するために何かする必要があるのだろうか、それともjQueryが付属しているのだろうか？あなたが行動変数を必要とするデフォルトのクリックイベント

セカンドを防ぐために必要がある必要

http://codepen.io/anon/pen/MpdRpE

<form class="form"> 
    <div class="form__item form__item_no-margin"> 
    <input type="text" name="firstname" placeholder="What's your name?*" class="firstname" required> 
    <p class="error-message">Sorry, but this field can't be empty.</p> 
    </div> 
    <div class="form__item"> 
    <input type="text" name="email" placeholder="What's your email address?*" class="email" required> 
    <p class="error-message">Oopps, I haven't seen emails like that.</p> 
    </div> 
    <div class="form__item"> 
    <textarea name="comment" placeholder="Want to leave any message?*" class="textarea" required></textarea> 
    <p class="error-message">Nothing to say at all? Really?</p> 
    </div> 
    <div class="form__item"> 
    <input type="button" name="submit" value="Send" class="submit-btn"> 
    <p class="error-message error-message_main val-error">All the required fields have to be filled out.</p> 
    <p class="error-message error-message_main_success val-success">Thanks. I'll contact you ASAP!</p> 
    </div> 
</form> 


.error-message { 
display: none; 
} 

    jQuery(document).ready(function(){ 
    jQuery(".submit-btn").click(function(){ 

    var name = jQuery(".firstname").val(); 
    var email = jQuery(".email").val(); 
    var message = jQuery(".textarea").val(); 

    if(name === "" || email === "" || message === "") { 
     jQuery(".val-error", ".error-message").css("display", "block"); 
    } 
    else { 
     jQuery.ajax({ 
     url:"/assets/php/send.php", 
     method:"POST", 
     data:{name:firstname, email:email, message:comment}, 
     success: function(data) { 
      jQuery("form").trigger("reset"); 
      jQuery(".val-success").show(fast); 
     } 
     }); 
    } 
    }); 
}); 

Answer 1

ファーストワードプレスのフックに渡す

3th yoエラーを示すためのu jQueryのセレクタが間違っている、コマ収差はWP documentation on ajax

Answer 2

リトル変更それ以外のコードはfine.Have表情を見ている

$(document).ready(function(){ 
    $(".submit-btn").click(function(){ 

    var name = $(".firstname").val(); 
    var email = $(".email").val(); 
    var message = $(".textarea").val(); 

    if(name === "" || email === "" || message === "") { 
     $(".val-error", ".error-message").css("display", "block"); 
     return false; 
    } 
    else { 
     $.ajax({ 
     url:"/assets/php/send.php", 
     method:"POST", 
     data:{name:name, email:email, message:message}, 
     success: function(data) { 
      if(data){ 
       $("form").trigger("reset"); 
       $(".val-success").show(fast); 
      }     
     } 
     }); 
    } 
    }); 
});