在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); 
      }     
     } 
     }); 
    } 
    }); 
});