Question

我正在使用"contact form 7" WordPress插件。

我想在表单提交上禁用“提交”按钮，并像这样更改文本

"Submitting...."并启用成功或错误提示，以便用户再次单击。

Answer 1

上述答案对我不起作用，可能与最新版本的CF7冲突。

无论如何，我已经更新了上面的代码，以便它可以与最新版本一起使用。

我还改进了代码，使其可以与网站上的任何表单一起使用，无论提交按钮怎么说。

它禁用提交按钮，更改值以要求用户耐心，然后在表单提交完成后，将恢复原始提交值。

/**
 * Disable WPCF7 button while it's submitting
 * Stops duplicate enquiries coming through
 */
document.addEventListener( 'wpcf7submit', function( event ) {
    
    // find only disbaled submit buttons
    var button = $('.wpcf7-submit[disabled]');

    // grab the old value
    var old_value = button.attr('data-value');

    // enable the button
    button.prop('disabled', false);

    // put the old value back in
    button.val(old_value);

}, false );

$('form.wpcf7-form').on('submit',function() {

    var form = $(this);
    var button = form.find('input[type=submit]');
    var current_val = button.val();

    // store the current value so we can reset it later
    button.attr('data-value', current_val);

    // disable the button
    button.prop("disabled", true);

    // tell the user what's happening
    button.val("Sending, please wait...");

});

Answer 2

请使用此代码禁用提交按钮。

jQuery('.wpcf7-submit').on('click',function(){
    jQuery(this).prop("disabled",true); // disable button after clicking on button
});

我们知道contact form 7插件在提交后会返回各种响应。

这是用于邮件发送事件：

 document.addEventListener( 'wpcf7mailsent', function( event ) {
      jQuery(this).prop("disabled",false);// enable button after getting respone
    }, false );

see all events of contact form 7

已更新：

document.addEventListener( 'wpcf7submit', function( event ) {
    var status = event.detail.status;  
    console.log(status);  
    //if( status === 'validation_failed'){
        jQuery('.wpcf7-submit').val("Send");
    //}    
}, false );

jQuery('.wpcf7-submit').on('click',function(){
    jQuery(this).val("Submitting....");
});

注意：：status在提交表单后返回诸如validation_failed，mail_sent之类的响应。

如何禁用提交按钮并更改在Wordpress“联系表单7”上提交的表单上的文本

2 个答案: