聯系表格 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 在提交表單后監聽的事件監聽器（不管是有效還是無效）。

Answer 2

這將禁用按鈕並提交表單。 您需要在禁用按鈕后重新調用提交。

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-press 提交表單），向提交按鈕添加一個新標簽“請稍候..”，如果有則重新啟用它們輸入錯誤。 此外，不依賴於 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

對於正在這里尋找解決方案的未來人。 無需 Javascript 的簡單 SCSS/CSS 選項。 對我來說是完美的工作。 它對我來說總是可靠的。 (2022)

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