提交前修改Contact Form 7输入值

时间：2018-06-23 作者：LocNguyen

我正在使用联系人表格7和Flamingo在我的Wordpress网站上创建一份顾问注册表格。根据我的客户要求，每次提交都需要一个注册码（reg\\U代码），它是提交日期和随机数的组合，以使其唯一。

因此，我在CF7代码中添加了一个id为“reg\\u code”的隐藏输入字段。在我的第一次尝试中，我使用JS在用户访问我的站点后立即生成一个“reg\\u code”变量，并将隐藏字段值设置为生成的“reg\\u code”变量。“注册码”已成功保存到CF7提交中，但在某些情况下，当用户在第一次访问时未提交表单，但几天后，其“注册码”中的日期部分将不正确，因为该代码是在首次访问时生成的，并缓存在浏览器中。

为了避免这个问题，我决定将“reg\\u code”生成函数从JS移到PHP，过程如下：

单击提交按钮，使用AJAX调用返回reg\\U代码的PHP函数，将CF7值中的隐藏字段“reg\\U代码”设置为返回的结果，真正执行CF7提交，将所有CF7字段保存到Flamingo，这是我的JS在CF7提交事件之前触发AJAX调用：

$(\'.wpcf7-form\').on(\'submit\', function (e) {
    $.ajax({
        type: "post",
        dataType: "json",
        url: js_object.ajax_url,
        data: {
            action: "custom_reg_code",
        },
        success: function (response) {
            if (response.success) {
                $(\'#reg_code\').val(response.data)
            }
            else {
                console.log(\'Something wrong\')
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(\'fail: \' + textStatus, errorThrown);
        },
        complete: function() {
        }
    })
})

我的结果是：它只在某些时候起作用。只有一些提交具有“reg\\U代码”值，其他一些提交具有空的“reg\\U代码”。

我猜，CF7提交事件不会等待AJAX调用完成。我试图添加e.preventDefault() 向上面的代码停止默认的CF7提交，但没有成功。我还尝试了CF7 eventListener“wpcf7submit”，但仍然没有成功。

最后，问题是：有没有办法暂停默认的CF7提交事件来修改输入字段值，然后继续提交过程？

非常感谢你

2 个回复

最合适的回答,由SO网友:Andy Macaulay-Brook 整理而成

您可以通过在PHP中的表单中放置一个隐藏字段来避免AJAX带来的痛苦，并以另一种方式实现这一点。

方法1，在插件的帮助下，我通常使用Contact Form 7动态文本扩展插件作为创建自定义CF7标记的简单途径，这仍然需要一些编码。你也可以走更远的路，只需编写自己的CF7标签，但我还没有尝试过，但我可能会对这个答案进行编辑。

有了这个插件，您可以像这样将标签放入CF7表单中：

[dynamichidden custom-reg-code “CF7_custom_reg_code”]

在CF7管理页面的电子邮件窗格中，您可以插入[自定义注册码]。

要使其正常工作，只需为自己创建一个匹配的短代码来生成字符串：

function generateRandomString($length = 10) {
    return substr(str_shuffle(str_repeat($x=\'0123456789\', ceil($length/strlen($x)) )),1,$length);
}

function wpse306816_CF7_custom_reg_code() {

    return date("Ymd") . generateRandomString();
}

add_shortcode(\'CF7_custom_reg_code\', \'wpse306816_CF7_custom_reg_code\');

帽尖至https://stackoverflow.com/a/13212994/6347850 用于生成随机数。

现在，您的表单中有一个隐藏字段，由当前日期和随机数组成，您可以在表单的发送电子邮件中使用该字段，也可以像其他CF7字段一样保存在Flamingo中。

方法2，没有插件的帮助，一点研究表明，只需编写自己的CF7标签，而不必使用插件，就更容易了。

创建CF7标记[serial], 您可以使用wpcf7_add_form_tag() 在wpcf7_init 操作挂钩，传递标记的名称和回调函数的名称来处理它：

add_action( \'wpcf7_init\', \'wpse306816_CF7_add_custom_tag\' );

function wpse306816_CF7_add_custom_tag() {
    wpcf7_add_form_tag(
        \'serial\',
        \'wpse306816_CF7_handle_custom_tag\' );
}

对于您的情况，回调只需返回串行字符串值：

function generateRandomString($length = 10) {
    return substr(str_shuffle(str_repeat($x=\'0123456789\', ceil($length/strlen($x)) )),1,$length);
}

function wpse306816_CF7_handle_custom_tag( $tag ) {
    return date("Ymd") . generateRandomString();
}

SO网友:Dan S

我想在此插话，因为我正努力解决同样的问题——在通过ajax提交CF7之前修改输入。我相信最初的海报是想弄清楚如何通过Javascript实现这一点，安迪在回答中没有提到。下面是一个如何做到这一点的示例：

var form = document.getElementsByClassName(\'wpcf7-form\')[0];
form.addEventListener(\'submit\', function(evt) {
    form.elements[\'reg_code\'].value = \'parsed_code\';
}, { capture: true });

密切关注事件侦听器中的最后一个参数-useCapture = true. 默认情况下，此参数为false。我的原始代码不起作用，忽略了这个参数。CF7 Ajax提交总是首先触发，从而忽略我的事件。通过简单地将useCapture更改为true，您的事件在调度CF7 Ajax事件之前首先触发。

我还没有尝试过，但我假设evt.preventDefault(), 如果需要，您可以有效地阻止CF7 Ajax表单的提交

结束

$(\'.wpcf7-form\').on(\'submit\', function (e) { $.ajax({ type: "post", dataType: "json", url: js_object.ajax_url, data: { action: "custom_reg_code", }, success: function (response) { if (response.success) { $(\'#reg_code\').val(response.data) } else { console.log(\'Something wrong\') } }, error: function (jqXHR, textStatus, errorThrown) { console.log(\'fail: \' + textStatus, errorThrown); }, complete: function() { } }) })

function generateRandomString($length = 10) { return substr(str_shuffle(str_repeat($x=\'0123456789\', ceil($length/strlen($x)) )),1,$length); } function wpse306816_CF7_custom_reg_code() { return date("Ymd") . generateRandomString(); } add_shortcode(\'CF7_custom_reg_code\', \'wpse306816_CF7_custom_reg_code\');

add_action( \'wpcf7_init\', \'wpse306816_CF7_add_custom_tag\' ); function wpse306816_CF7_add_custom_tag() { wpcf7_add_form_tag( \'serial\', \'wpse306816_CF7_handle_custom_tag\' ); }

function generateRandomString($length = 10) { return substr(str_shuffle(str_repeat($x=\'0123456789\', ceil($length/strlen($x)) )),1,$length); } function wpse306816_CF7_handle_custom_tag( $tag ) { return date("Ymd") . generateRandomString(); }

小码农CODE

提交前修改Contact Form 7输入值

相关推荐

小码农CODE

提交前修改Contact Form 7输入值

相关推荐