Ajax和jQuery在Wordpress中自定义表单提交(Ajax and jQuery custom form submission in Wordpress)

Ajax和jQuery在Wordpress中自定义表单提交(Ajax and jQuery custom form submission in Wordpress)

我不是一个完全的技术，我试图为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); } }); } }); });

I'm not a tech completely, and I'm trying to build my custom theme for WordPress. So, I came to a point that I need to implement a custom JS script to send the form data. As far as I understand, it's going to be a PHP file, but now I'm concentrated on front-end. This is AJAX + jQuery validation. I don't want my form to refresh the page after it sends the data, just a simple message telling that everything went successful.

Can anyone have a look at the code I wrote and tell me what's wrong with it? It took me just two days..

PS - the file, that stores that code is embedded into WP theme properly, with a jQuery as a dependancy. I wonder, do I have to do anything to implement AJAX, or it comes with 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); } }); } }); });

最满意答案

首先你需要防止默认的点击事件

其次你需要一个动作变量传递给WordPress的钩子

3你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); } }); } }); });

有关更多信息，请阅读ajax上的wp 文档

First you need to prevent the default click event

Second you need a action variable to pass to the wordpress hook

3th you jquery selector for showing the errors is incorrect, the coma needs to be in the string

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

for more information read the wp documentation on ajax