Question

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

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

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

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

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

Answer 3

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

app.use((req, res, next) => {

  const methods = router.stack

  // Filter for the route that matches the currently matched route
  .filter(layer => layer.route.path === req.path)[0]
  .route
  .methods;

  if (!methods[req.method]) methodNotAllowed(req, res, next);
  else next();

});

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

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

Answer 4

我实现了此脚本，以帮助防止多次提交。与其他最大的不同是，它可以在每个页面上使用多个CF7表单。基本上，它禁用表单和提交时的提交按钮（因为也可以通过Enter-press提交表单），在提交按钮上添加新标签“ Please Wait ..”，如果有，则重新启用它们。输入错误。另外，不依赖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);
  }

})();

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

联系表格7添加禁用attr到按钮以防止双重提交

4 个答案: