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

Question

我有一个 WordPress 网站，并且有 Contact form 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 监听的事件监听器，在表单提交后（无论有效还是无效）。

Answer 2

这将禁用该按钮并提交表单。禁用按钮后需要重新调用submit。

jQuery( '.wpcf7-submit' ).click(function() {
    jQuery( this ).attr( 'disabled', true );
    jQuery( this ).submit();
});

如果提交出现错误，这将重新启用该按钮。

document.addEventListener( 'wpcf7invalid', function() {
    jQuery( '.wpcf7-submit' ).attr( 'disabled', false );
}, false );

Answer 3

$(document).on('click', '.wpcf7-submit', function(e){
    $(this).prop('disabled',true);
});

Answer 4

我实现这个脚本是为了帮助防止多次提交。与其他最大的区别是它可以在每个页面上处理多个 CF7 表单。基本上，它会禁用表单和提交时的提交按钮（因为表单也可以通过按 Enter 键提交），向提交按钮添加新标签“请稍候..”，并在存在以下情况时重新启用它们：输入错误。另外，不依赖于 jQuery (Vanilla JS)。

(function () {
  var elems = document.querySelectorAll('.wpcf7');
  if (!elems.length) {
    return false;
  }
  var forms = document.querySelectorAll('.wpcf7-form');
  if (!forms.length) {
    return false;
  }

  function _evtFormSubmit() {
    this.disabled = true;
    var submitBtn = this.querySelector('button[type="submit"]');
    submitBtn.disabled = true;
    submitBtn.setAttribute('data-default-text', submitBtn.innerText);
    submitBtn.innerHTML = '<span>Please wait...</span>';
  }

  function _evtInvalid(e) {
    var thisForm = document.querySelector('#' + e.detail.id + ' form');
    thisForm.disabled = false;
    var submitBtn = thisForm.querySelector('button[type="submit"]');
    setTimeout(function() {
      submitBtn.disabled = false;
    submitBtn.innerHTML = '<span>' + submitBtn.getAttribute('data-default-text') + '</span>';
    }, 600); // give it a bit of time in case it is a fast submit
  }

  for(var i = forms.length-1; i >= 0; i--) {
    forms[i].addEventListener('submit', _evtFormSubmit, false);
  }
  for(i = elems.length-1; i >= 0; i--) {
    elems[i].addEventListener('wpcf7invalid', _evtInvalid, false);
  }

})();

注意：如果您有多个提交按钮（为什么？），这只会影响表单中的第一个按钮。

Answer 5

对于未来在这里寻找解决方案的人。简单的 SCSS/CSS 选项，无需 Javascript。对我来说就是完美的工作。它对我来说总是可靠的。 （2022）

.wpcf7-form {
    &.submitting {
        .wpcf7-submit {
            pointer-events: none;
        }
    }
}

Answer 6

这种风格对我来说是完美的作品。

form.submitting .wpcf7-submit {pointer-events: none;}