在联系表单7提交中调用JavaScript函数

问题描述：

我在Wordpress中使用联系表单7，以皮肤美容为主题。我想要做的是当我创建的表单被引用时调用特定的JavaScript函数。在联系表单7提交中调用JavaScript函数

在我的HTML代码，我创建的形式是这样的：

<form onsubmit="checkvalue()"> 
... 
</form>

而且在我的HTML代码的正文的最后，我创建一个JavaScript函数与验证我想的做形式：

<script language="JavaScript" type="text/javascript"> 
    function checkvalue() { 
    ... 
    } 
</script>

我尝试了代码的另一个主题（第二十三） - 与联系表7 - 和奇怪的是，没有任何问题存在。

有人可以告诉我为什么它在Twenty 13主题上正确运行，但与皮肤美容它不？有什么方法可以使用我的JavaScript函数和我的表单的onsubmit？

答

编辑：这个答案现在已过时，因为所提及的选项已被弃用（和删除）。有关最新方法，请参阅Simon's answer。

我不知道约二十十三，而是要呼吁提交表单与联系表7的功能正确的方法是通过增加窗体的Additional Settings部分on_submit选项。

这将确保您的代码正确地连接到联系表单7的例程，并将在正确的时间被调用。

这里是什么样子：

可以包括任何一个，或者两个，这些额外的设置。

按照文档：

如果设置on_sent_ok:后面是一行JavaScript代码，你可以告诉接触形成时，邮件发送成功应该执行的代码。同样，使用on_submit:，您可以告诉在提交表单时应执行的代码，而不管结果如何。

另外请注意，您不应该创建自己的<form>标签。如果您通过简码包含表单（如[contact-form-7 id="10"]），则联系表单7会为您提供此功能，并且创建您自己的标签将产生意想不到的后果。

既然您有兴趣进行验证，您也可以阅读关于联系表格7的pluggable server-side validation options（尽管我知道您正在尝试在这种情况下进行客户端验证）。

非常感谢您的回答。虽然我正在寻找一种方法来解决我的问题，我也发现了这两个选项，我试着on_submit。 on_submit的问题是当ι按下我的表单按钮（虽然验证有效）时，表单仍然提交。我搜索是否有任何方法可以取消提交，如果在字段中发生错误，但我找不到任何东西。 –

@NikosK嗯，你知道吗，上面链接的服务器端验证选项实际上可以帮助你的情况，因为CF7在提交表单之前通过Ajax验证。所以它几乎和客户端验证一样好。这会是一个合适的解决方案吗？除此之外，我不知道有一种内置的方式来阻止表单提交（这可能是通过一些hackery）。 –

@NikosK或者有我刚刚找到的这个插件 - https://wordpress.org/plugins/jquery-validation-for-contact-form-7/ - 这看起来像是在进行客户端验证。我现在无法查看它，但是你可以从它的代码中学习它是如何做到的。 –

答

由于联系表7的作者无法控制代码中的安全性/潜在漏洞，现已弃用已批准的答案。更多细节在这里：https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/

相反，你需要拦截的DOM事件wpcf7submit - 细节，其在这里：https://contactform7.com/dom-events/

在你的具体的例子，找到你的表单的id是在短码的ID。假设这个数字是123（尽管它可能不是）。

document.addEventListener('wpcf7submit', function(event) { 
    if ('123' == event.detail.contactFormId) { 
     alert("The contact form ID is 123."); 
     // do something productive 
    } 
}, false);

根据上述示例。有两个问题 - 首先我无法看到表单值传递给这个监听器的位置，我怀疑它们可能在这一点上不再可见。这是因为（第二个问题）这个事件在提交后被解雇，而且你需要在提交之前让你的事件运行，所以onsubmit事件可能不是合适的触发器。提交表单发生在点击“提交”按钮后。已批准的答案在这里：Contact form 7 call submit event in jQuery在整个表单提交之前在点击按钮的位置拦截DOM。这是我会采取的方法。

记住，你可以添加到听者的functions.php这样的：

add_action('wp_footer', 'mycustom_wp_footer'); 

function mycustom_wp_footer() { 
    ?> 
    <script type="text/javascript"> 
     var wpcf7Elm = document.querySelector('.wpcf7'); 

     wpcf7Elm.addEventListener('wpcf7submit', function(event) { 
      alert("Fire!"); 
     }, false); 
    </script> 
    <?php 
}

在联系表单7提交中调用JavaScript函数

相关推荐