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

By simon at 2018-02-28 • 0人收藏 • 51人看过

我在Wordpress中使用联系表格7,以皮肤美容为主题。我什么 想要做的就是调用一个特定的JavaScript函数n当我创建的表单 已提交。 在我的HTML代码中,我创建了一个如下所示的表单:

<form onsubmit="checkvalue()">
...
</form>
并在身体的尽头我的HTML代码,我正在创建一个JavaScript 函数与我想要在窗体上做的验证:
<script language="JavaScript" type="text/javascript">
   function checkvalue() {
   ...
   }
</script>
我试了我的代码ñ另一个主题(二十三) - 与联系表格7 - 奇怪的是,那里没有问题。 任何人都可以让我为什么它在Twenty Thirteen主题上正确运行,但是 与皮肤美容它不?有什么办法可以使用我的JavaScr吗?ipt功能 用我的表格onsubmit?

2 个回复 | 最后更新于 2018-02-28
2018-02-28   #1

我不确定二十十三,但调用函数的正确方法 提交与联系表格7的表格是通过添加on_submit 选项在[附加设置](http://contactform7.com/additional- 设置/)部分你的fORM。 这将确保您的代码正确连接到联系表单7 例程,并会在正确的时间被调用。 他重新看起来是这样的: [![enter image description 这里](https://i.stack.imgur.com/f5Ily.png)(https://i.stack.imgur.com/f5Ily。PNG) 您可以包含这些附加设置中的一个或两个。 根据文件:

如果你设置on_sent_ok: fol由一行JavaScript代码降低,你可以 告诉联系表格当邮件发送时应该执行的代码 帅客ssfully。同样,使用on_submit:,你可以告诉应该的代码 无论何时提交表格,都要执行结果。 另请注意,您不应创建自己的<form>标签。 联系表格7为您提供帮助通过它的简码隐藏表单 (例如[contact-form-7 id="10"])并且创建您自己的标签将会意外 后果。 既然你是有兴趣进行验证,您可能还想了解一下 联系表格7的[可插拔服务器端验证 选项](HTTP://contactform7.com/2015/03/28/custom-validation/)(尽管我 知道你正在尝试在这种情况下进行客户端验证)。

2018-02-28   #2

现在已批准的答案出于安全/ 代码中的潜在漏洞是联系人Fo的作者7号公司无法控制 过度。更多细节在这里: 相反,你需要to拦截DOM事件wpcf7submit - 其中的细节 在这里:https://contactform7.com/dom-events/ 在你的具体考试中请找到您的表单的ID,这是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事件可能不是适当的触发器。 Submissi的 表单发生在点击“提交”按钮后。这里核准的答案是: [联系表格7致电提交活动 jQueRY](https://stackoverflow.com/questions/34723740/contact-form-7-call- submit-event-in-jquery)在wh点拦截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
}

登录后方可回帖

Loading...