我不是一个完全的技术,我试图为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
更多推荐
jQuery,class,error-message,电脑培训,计算机培训,IT培训"/> <meta name="de
发布评论