联系表 7 将禁用的属性添加到按钮以防止重复提交

Question

我有一个 WordPress 网站，并且有 Contact form 7 插件，我想添加 attr 以提交按钮以禁用双重提交。现在我有这个代码来防止双重提交

$(document).on('click', '.wpcf7-submit', function(e){
            if( $('.ajax-loader').hasClass('is-active') ) {
                e.preventDefault();
                return false;
            }
        });

但我想在表单发送或获取错误响应时添加 attr disabled 以获得更好的用户体验

Answer 1

改进马特的回答 -

$('.wpcf7-form').on('submit', function() {
   $(this).find('.wpcf7-submit').attr('disabled', true);
});

单击它时，这将禁用提交按钮。现在要在成功或失败后再次激活它，您需要在提交完成后（无论成功或失败）删除该属性。由于插件开发人员对事件的工作方式有点异想天开，我正在为 2019 年第一季度编写此解决方案 -

$('.wpcf7').on('wpcf7submit', function (e) {
   $(this).find('.wpcf7-submit').removeAttr('disabled');
});

其中“.wpcf7”是表单的父容器，“.wpcf7-form”是表单本身。' wpcf7submit ' 是 DOM 监听的事件监听器，在表单被提交后（不管是有效还是无效）。