Javascript 联系表格 7 AJAX 回调
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27798264/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Contact Form 7 AJAX Callback
提问by fish_r
Been searching around on this for a while and can't come up with any documentation to outline what i want to achieve.
在这方面搜索了一段时间，但无法提出任何文档来概述我想要实现的目标。
I'm using wordpress and the Contact Form 7 plugin, all is working perfectly, what i want to achieve is to run some particular javascript upon form submit, i know we can use "on_sent_ok:" in the additional settings, but this only performs if the form is actually submitted.
我正在使用 wordpress 和 Contact Form 7 插件，一切正常，我想要实现的是在表单提交时运行一些特定的 javascript，我知道我们可以在附加设置中使用“on_sent_ok:”，但这只能执行如果表单实际提交。
What i'd like to do is to do some other javascript when the form doesn't submit ok, which throws the user back to the section which didn't validate.
我想做的是在表单未提交时执行其他一些 javascript，这会将用户返回到未验证的部分。
I can use the following code to run after 1.7s of the form submit being clicked, however it's a bit sloppy as if the user was running with a slow connection, there's potential this could run before the form is submitted properly.
我可以使用以下代码在单击表单提交的 1.7 秒后运行，但是它有点草率，好像用户正在以慢速连接运行，这可能会在表单正确提交之前运行。
$('.wpcf7-submit').click(function() {
setTimeout(function() {
if ($('.fs1 input,.fs1 textarea').hasClass('wpcf7-not-valid')) {
$('.pop-up-form').removeClass('pustep2').removeClass('pu-closing');
$('.form-step').hide();
$('.fs1').show();
}
if ($('.fs2 *').hasClass('wpcf7-not-valid')) {
alert('error on page 2 - take user back to the area with issues')
}
}, 1700);
});
Is there any particular function or hook i can use to run JS when the form AJAX has completed?
当表单 AJAX 完成时，是否有任何特定的函数或钩子可以用来运行 JS？
Thanks!
谢谢！
采纳答案by Nathan Hornby
Given the variety of responses on this topic the plugin developer seems to change their mind about how this should work every 5 minutes. Currently (Q1 2017) this is the working method:
鉴于对这个主题的各种回应，插件开发人员似乎每 5 分钟改变一次关于这应该如何工作的想法。目前（2017 年第一季度）这是工作方法：
document.addEventListener( 'wpcf7mailsent', function( event ) {
alert( "Fire!" );
}, false );
And the valid events are:
有效的事件是：
- wpcf7invalid— Fires when an Ajax form submission has completed successfully, but mail hasn't been sent because there are fields with invalid input.
- wpcf7spam— Fires when an Ajax form submission has completed successfully, but mail hasn't been sent because a possible spam activity has been detected.
- wpcf7mailsent— Fires when an Ajax form submission has completed successfully, and mail has been sent.
- wpcf7mailfailed— Fires when an Ajax form submission has completed successfully, but it has failed in sending mail.
- wpcf7submit— Fires when an Ajax form submission has completed successfully, regardless of other incidents.
- wpcf7invalid— 当 Ajax 表单提交成功完成时触发，但由于存在无效输入的字段而未发送邮件。
- wpcf7spam— 当 Ajax 表单提交成功完成时触发，但由于检测到可能的垃圾邮件活动而未发送邮件。
- wpcf7mailsent— 当 Ajax 表单提交成功完成并且邮件已发送时触发。
- wpcf7mailfailed— 当 Ajax 表单提交成功完成但发送邮件失败时触发。
- wpcf7submit— 当 Ajax 表单提交成功完成时触发，不管其他事件如何。
回答by vicente
In version 3.3 new jQuery custom event triggers were introduced:
在 3.3 版中引入了新的 jQuery 自定义事件触发器：
New: Introduce 5 new jQuery custom event triggers
新增：引入 5 个新的 jQuery 自定义事件触发器
- wpcf7:invalid
- wpcf7:spam
- wpcf7:mailsent
- wpcf7:mailfailed
- wpcf7:submit
- wpcf7：无效
- wpcf7:垃圾邮件
- wpcf7:mailsent
- wpcf7：邮件失败
- wpcf7：提交
You can use wpcf7:invalidlike the example below:
你可以wpcf7:invalid像下面的例子一样使用：
$(".wpcf7").on('wpcf7:invalid', function(event){
// Your code here
});
回答by smesh
Sometimes it may not work, as Martin Klassonpointed out, only 'submit' event works, most probable because it's triggered by a form and bubbles up to the selected object. Also as I can understand, now events have other names, like "invalid.wpcf7", "mailsent.wpcf7", etc. In short, this should work:
有时它可能不起作用，正如Martin Klasson指出的那样，只有 'submit' 事件有效，很可能是因为它由表单触发并冒泡到所选对象。另外据我所知，现在事件有其他名称，如“invalid.wpcf7”、“mailsent.wpcf7”等。简而言之，这应该有效：
jQuery('.wpcf7').on('invalid.wpcf7', function(e) {
// your code here
});
More detailed explanation here: How to add additional settings on error in Contact form 7?
这里有更详细的解释：如何在联系表 7 中添加有关错误的附加设置？
回答by clementb
I had quite a go at this, and I found that when only the Submitevent works, it means that there is a js problem / conflict in your theme.
我在这方面做了很多尝试，我发现当只有Submit事件有效时，这意味着您的主题中存在 js 问题/冲突。
If it's a custom theme you built, make sure jQuery and jQuery migrate are both loaded, in this order, and that the Contact form 7 js is also loaded in the footer.
如果它是您构建的自定义主题，请确保按此顺序加载 jQuery 和 jQuery migrate，并且在页脚中也加载了 Contact 表单 7 js。
Make sure you have wp_head, and wp_footerin your php templates.
确保你的wp_head, 和wp_footer在你的 php 模板中。
For DOM events to work, your form must be in Ajax mode. If the page reloads upon submission, forget about DOM events. If you have the form ID showing up in the URL, same thing. My form was initially not in Ajax mode because the Contact Form JS was not loaded, and jQuery Migrate either.
要使 DOM 事件起作用，您的表单必须处于 Ajax 模式。如果页面在提交时重新加载，请忘记 DOM 事件。如果您在 URL 中显示了表单 ID，同样的事情。我的表单最初不是在 Ajax 模式下，因为没有加载 Contact Form JS，也没有加载 jQuery Migrate。
The form must behave exactly like shown on this pagefor the DOM events to be fired properly. Once you have that, it should be working.
表单的行为必须与此页面上显示的完全相同，才能正确触发 DOM 事件。一旦你有了它，它应该可以工作。
I've tested this with jQuery 3.3.1 and Migrate 3.0.1 and the following event listener worked:
我已经使用 jQuery 3.3.1 和 Migrate 3.0.1 对此进行了测试，并且以下事件侦听器有效：
document.addEventListener( 'wpcf7mailsent', function( event ) {
console.log('mail sent OK');
// Stuff
}, false );
To check if your theme is the culprit, test your form using Wordpress' default theme, if it works, you know the issue is on your end and not so much in the dev's doc!
要检查您的主题是否是罪魁祸首，请使用 Wordpress 的默认主题测试您的表单，如果有效，您就知道问题出在您的身上，而不是在开发人员的文档中！
