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

Question

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

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

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

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 监听的事件监听器(无论有效还是无效)。