成功提交表单后禁用表单

Question

We're having problems with an open source third party application. Many of the forms take awhile to submit and people are pressing the 'submit' button multiple times. Many of these forms are already using onsubmit to validate the forms. We don't want to harm any of that.

At first, we thought we could just disable submit buttons once clicked. The problem is if the form doesn't validate, then the button is still disabled.

We also can't just use a basic onsubmit because we would overwrite the current validation and other processes.

Is there a way that we can disable the submit button only after validatation when the form actually begins successful submission?

Answer 1

如果您使用的是jQuery，则调用您的validate函数，如果失败，则只需重新启用该按钮即可。

Answer 2

Since you have no control over the third-party app, one approach may be to disable each button on click, and then re-enable that button after a certain period – long enough for the validate routine to complete. If the validate function is successful, the form will submit, at which point there's no button to re-enable.

This should get you going:

$('button').on('click',function() {
  $(this).prop('disabled', true);
  (function(b) {
     setTimeout(function() {
       b.prop('disabled', false);
     },1000);
   }
  )($(this));
});

Fiddle: http://jsfiddle.net/x3tv6vqo/