How to disable the submit button after clicking?

Question

Drupal doesn't seem to prevent multiple form submits, even on node pages. This QA suggests fixing it on the server side.

How could I disable the submit button after clicking?

Any other solutions?

Answer 1

It's only in dev but the Hide Submit module would do the trick. One of the features is:

Hide (or disable) the submit button after it has been clicked

I've just installed it on a dev site and it seems to work well for node add forms; when you click the submit button it's hidden and replaced with a loading image and a 'Please wait...' message, before the form is finally submitted. I haven't tried it on any other forms though.

Answer 2

Here is solution for Drupal 7. Code is simplified version of Hide Submit module.

This code works fine even with "Add more" buttons and AJAX forms.

Drupal.behaviors.hideSubmitButton = {
  attach: function(context) {
    $('form.node-form', context).once('hideSubmitButton', function () {
      var $form = $(this);
      $form.find('input.form-submit').click(function (e) {
        var el = $(this);
        el.after('<input type="hidden" name="' + el.attr('name') + '" value="' + el.attr('value') + '" />');
        return true;
      });
      $form.submit(function (e) {
        if (!e.isPropagationStopped()) {
          $('input.form-submit', $(this)).attr('disabled', 'disabled');
          return true;
        }  
      });
    });
  }
};

Answer 3

The easiest way is to do a theme based javascript solution to disable the button after form submission. In the theme.info file, put your javascript file so it can be loaded by the theme api.

scripts[] = js/themename-script.js

Now in the themename-script.js add to the Drupal.behaviors.themename section to look like the following:

Drupal.behaviors.themename = function()
{
  $('.node-form').submit(function(){
    $('#edit-submit').attr("disabled", "disabled");
    $('#edit-preview').attr("disabled", "disabled");
  });
}

So the flow is as follows:

1. Theme loads the javascript
2. The Drupal.behaviors.themename is fired on page load
3. On the form submission of the node add form (class based in the above example, it can be customized on the type of form) disable the submit buttons (submit and preview) so it cannot be clicked again

I am sure if there is some ajax processing that the above could be dangerous and the form submission could never be done again if an error is caught in the form_api validation so do test this and customize to meet your needs. I disabled both buttons since you could still click the preview button while the submit button was disabled. Obviously your milage my vary.