wordpress 如果联系人表单驻留在AJAX加载的内容中, AJAX 提交将不起作用

hkmswyz6  于 2023-03-22  发布在  WordPress
关注(0)|答案(3)|浏览(168)

如果 AJAX 加载的内容包含CF7联系人表单,AJAX提交将不适用于该表单。
建议的解决方法是将此行放在联系表模板中:

<script src="/wp-content/plugins/contact-form-7/includes/js/scripts.js"></script>

这将使表单正常工作,但会导致另一个问题:一个普通的CF7联系人表单,放置在页面中没有被 AJAX 加载的部分,在提交时会显示多个微调图标。
可能是因为多次包含脚本将多次绑定表单代码,而这些表单没有放在 AJAX 加载的内容中。

du7egjpx

du7egjpx1#

我自己找到了解决方案。如果你既有一个联系人表单没有被 AJAX 加载,又有一个联系人表单被ajax加载,对于第二个,你需要修改模板添加:

<div id="ajaxform_wrapper">
    <script>
        jQuery('#ajaxform_wrapper > div.wpcf7 > form').wpcf7InitForm();
    </script>
    ... contact form fields...
</div>

基本上,我们将表单字段 Package 到一个div #ajaxform_wrapper(随机名称)中,并添加一行Javascript,仅为该表单绑定CF7代码,避免在已经初始化的表单上进行多个绑定。
这将工作,你不会看到多个微调时提交正常的联系表格。

z4bn682m

z4bn682m2#

工作解决方案(调用 AJAX 完成):

var ajaxContainer = $('#somediv_id'),
    newCF7 = $('.wpcf7 > form', ajaxContainer);
    newCF7.attr('action', "#" + newCF7.attr('id'));
    wpcf7.initForm( newCF7 );
thtygnil

thtygnil3#

2022年6月工作溶液:

initForminit替换,并接受HTMLFormElement对象。

document.querySelectorAll('.wpcf7-form').forEach(function(form) {
    wpcf7.init(form);
});

相关问题