如何在成功提交表单（联系表 7）后发送 ajax 请求，其中包含多个选项卡 Bootstrap 5

Question

我在 Bootstrap 5 标签面板中有多个 Contact Form 7 表单。我想在每次成功提交后发送 Ajax 请求发送一些数据。我使用 wpcf7mailsent 来实现这一点。这仅适用于第一个选项卡表单。不适合别人。选项卡中的所有表格都运行良好并接收来自这些表格的电子邮件。唯一的问题是 Ajax 请求未在其他选项卡中触发。这是我目前使用的代码。

var wpcf7Elm = document.querySelector( '.wpcf7' );
    wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {

        var dataSet = {set of serialized data};

        $.ajax({
            type: "POST",
            url: "url",
            data: dataSet,
            dataType:"JSONP",
            success: function(response) {
                console.log( response );
            },
            error: function (data, errorThrown) {
                console.log(errorThrown);
            }
        });

    }, false );`

这仅适用于第一个选项卡。无论我浏览其他所有选项卡，此功能仅适用于第一个选项卡。

非常感谢任何帮助。谢谢

Answer 1

查看您包含的代码，您似乎只选择了一个元素而不是所有元素，将 document.querySelector( '.wpcf7' ); 更改为 document.querySelectorAll( '.wpcf7' ); 以将函数应用于所有字段

var wpcf7Elms = document.querySelectorAll( '.wpcf7' );
for(i=0;i<wpcf7Elms.length;i++){
var wpcf7Elm = wpcf7Elms[i];
wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {

    var dataSet = {set of serialized data};

    $.ajax({
        type: "POST",
        url: "url",
        data: dataSet,
        dataType:"JSONP",
        success: function(response) {
            console.log( response );
        },
        error: function (data, errorThrown) {
            console.log(errorThrown);
        }
    });

}, false );
}`

如何在成功提交表单（联系表 7）后发送 ajax 请求，其中包含多个选项卡 Bootstrap 5

How to sent ajax request after Successful form submission (Contact Form 7) with multiple within tabs Bootstrap 5

ajax

wordpress

jquery

contact-form-7