Question

一直在寻找这个问题，并且无法提出任何文档来概述我想要实现的目标。

我正在使用wordpress和Contact Form 7插件，一切都运行完美，我想要实现的是在表单提交时运行一些特定的javascript，我知道我们可以在其他设置中使用“on_sent_ok：”但是这仅在表格实际提交时才会执行。

我想做的是在表单未提交确定时执行其他一些javascript，这会将用户返回到未验证的部分。

我可以使用以下代码在单击表单提交的1.7s之后运行，但是它有点草率，好像用户使用慢速连接运行，有可能在表单正确提交之前运行。< / p>

 $('.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);
});

当表单AJAX完成时，是否有任何特定的函数或钩子可以用来运行JS？

谢谢！

Answer 1

在3.3版本中引入了新的jQuery自定义事件触发器：

新：介绍5个新的jQuery自定义事件触发器

wpcf7：无效
wpcf7：垃圾
wpcf7：mailsent
wpcf7：mailfailed
wpcf7：提交

您可以使用wpcf7:invalid，如下例所示：

$(".wpcf7").on('wpcf7:invalid', function(event){
  // Your code here
});

Answer 2

鉴于有关此主题的各种回复，插件开发人员似乎改变了他们对每5分钟如何工作的想法。目前（2017年第一季度）这是工作方法：

document.addEventListener( 'wpcf7mailsent', function( event ) {
  alert( "Fire!" );
}, false );

有效事件是：

wpcf7invalid - Ajax表单提交完成后触发成功，但邮件尚未发送，因为有字段输入无效。
wpcf7spam - 在Ajax表单提交时触发已成功完成，但邮件尚未发送，因为可能已检测到垃圾邮件活动。
wpcf7mailsent - 在Ajax时触发表单提交已成功完成，邮件已发送。
wpcf7mailfailed - Ajax表单提交完成后触发已成功，但发送邮件失败。
wpcf7submit - 开火无论如何，当Ajax表单提交成功完成时其他事件。

酱：https://contactform7.com/dom-events/

Answer 3

有时它可能无效，正如Martin Klasson所指出的那样，只有提交＆＃39;事件有效，最有可能，因为它是由一个表单触发并冒泡到所选对象。另外据我所知，现在事件还有其他名称，例如＆＃34; invalid.wpcf7＆＃34;，＆＃34; mailsent.wpcf7＆＃34;等等。简而言之，这应该有效：

jQuery('.wpcf7').on('invalid.wpcf7', function(e) {
    // your code here
});

此处有更详细的解释：How to add additional settings on error in Contact form 7?

Answer 4

我对此非常感兴趣，并且我发现当只有Submit事件有效时，这意味着您的主题中存在js问题/冲突。

如果它是您构建的自定义主题，请确保按此顺序加载jQuery和jQuery migrate，并且联系人表单7 js也会加载到页脚中。

确保您的php模板中有wp_head和wp_footer。

要使DOM事件起作用，您的表单必须处于Ajax模式。如果页面在提交时重新加载，请忘记DOM事件。如果您在URL中显示表单ID，则相同。我的表单最初不是Ajax模式，因为没有加载Contact Form JS，jQuery Migrate也是。

表单必须表现exactly like shown on this page才能正确触发DOM事件。一旦你有了它，它应该工作。

我已经使用jQuery 3.3.1和Migrate 3.0.1对此进行了测试，并且以下事件监听器工作正常：

document.addEventListener( 'wpcf7mailsent', function( event ) {
    console.log('mail sent OK');
    // Stuff
}, false );

要检查您的主题是否是罪魁祸首，请使用Wordpress＆＃39;来测试您的表单。默认主题，如果它有效，你知道问题就在你的最后，而不是开发人员的文档！

联系表格7 AJAX回拨

4 个答案: