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

Question

I have a WordPress site and there is Contact form 7 plugin and I want to add attr to submit button to disable double submission. Now I have this code to prevent double submission

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

but I want to add attr disabled while form sending or getting error response for better user experience

Answer 1

Improving on Matt's answer -

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

This would disable the submit button when clicked on it. Now to get that activated again after success or failure you would need to remove the attribute after the submission is complete(whether success or failure). Since the plugin developer is a bit whimsical about how the events work, I am writing this solution for first quarter of 2019 -

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

where '.wpcf7' is the parent container of the form, '.wpcf7-form' is the form itself. The ' wpcf7submit ' is event listener that the DOM listens to, after the form gets submitted(irrespective of the fact that is valid or invalid).

Answer 2

This will disable the button and submit the form. You need to re-call submit after disabling the button.

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

This will re-enable the button if there's an error with the submission.

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

I implemented this script to help prevent multiple submissions. The biggest difference from the others is that it works with multiple CF7 forms on each page. Basically, it disables the form and the submit button on submit (since a form can also be submitted with an Enter-press), adds a new label "Please Wait.." to the submit button, and re-enables them if there are input errors. Also, not dependent on 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);
  }

})();

Note: if you have more than one submit button (why?), this only affects the first button in the form.

Answer 5

For future people who are looking for a solution here. Simple SCSS/CSS option without Javascript need. For me is work pefect. It always works reliably for me. (2022)

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