在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

首先，你需要阻止默認點擊事件

其次，你需要一個操作變量傳遞給wordpress鉤子

3th yo用於顯示錯誤üjQuery選擇不正確，昏迷需要是字符串

jQuery(document).ready(function(){ 
    jQuery(".submit-btn").click(function(e){ 
    e.preventDefault(); 
    var name = jQuery(".firstname").val(); 
    var email = jQuery(".email").val(); 
    var message = jQuery(".textarea").val(); 

    if(name === "" || email === "" || message === "") { 
     jQuery(".val-error, .error-message").show();//a little bit cleaner 
    } 
    else { 
     jQuery.ajax({ 
     url:"/assets/php/send.php", 
     method:"POST", 
     data:{name:firstname, email:email, message:comment,action:'validate_form'}, 
     success: function(data) { 
      jQuery("form").trigger("reset"); 
      jQuery(".val-success").show(fast); 
     } 
     }); 
    } 
    }); 
}); 

更多的信息，閱讀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); 
      }     
     } 
     }); 
    } 
    }); 
});