如何禁用提交按钮,并在WordPress的表格提交更改文本“联系表格7”

e4yzc0pl  于 2023-01-04  发布在  WordPress
关注(0)|答案(3)|浏览(150)

我正在使用"contact form 7" WordPress插件。
我想禁用表单提交上的提交按钮,并更改文本,如
"Submitting...."并在成功或出错时启用,以便用户可以再次单击。

m3eecexj

m3eecexj1#

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

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_failedmail_sent等响应。
c9qzyr3d

c9qzyr3d2#

以上答案对我不起作用,可能与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...");

});
whlutmcx

whlutmcx3#

你可以用这个代替。这个代码将帮助你禁用提交按钮,直到发送成功的电子邮件。你可以停止多次提交此代码。

// disable button after clicking on submit button
<?php add_action('wp_footer', 'mycustom_wp_footer');
function mycustom_wp_footer()
{
?>
    <script type="text/javascript">
        jQuery('.wpcf7-form').submit(function() {
            jQuery(this).find(':input[type=submit]').prop('disabled', true);
            var wpcf7Elm = document.querySelector('.wpcf7');
            wpcf7Elm.addEventListener('wpcf7submit', function(event) {
                jQuery('.wpcf7-submit').prop("disabled", false);
            }, false);
            wpcf7Elm.addEventListener('wpcf7invalid', function() {
                jQuery('.wpcf7-submit').prop("disabled", false);
            }, false);
        });
    </script>
<?php
}?>

相关问题