13

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?

  • Doesn't Drupal's Form API prevent double-submitting thanks to its form token value check? Can't submit a form with the same token twice? – Johnathan Elmore May 7 '12 at 17:08
12

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.

  • Any idea on how to get the hide submit module to work on forms in your own custom modules? I was hoping it would be site wide, but that doesn't appear to be the case. – user785179 Nov 30 '12 at 20:46
  • @user785179 look how it implements hook_form_alter() - if it's using hook_form_FORMID_alter(), switch it to generic hook_form_alter(). If it is generic hook_form_alter() with if inside, add some or's in this if. – Mołot Aug 30 '13 at 11:26
  • Be careful with this solution - the hide submit module breaks ajax uploads, causes autocomplete problems, and in some cases causes the submit button to do nothing at all on the first click. I just had to uninstall it from a site. – jenlampton Nov 21 '16 at 19:36
  • @Jen Strange, I've been using it in dozens of sites for years without seeing any problems like that. Perhaps you have another module installed that interferes with it – Clive Nov 21 '16 at 19:45
10

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;
        }  
      });
    });
  }
};
  • I want to implement this in adminimal theme. Made a file sitename.js and copied above code into it. It is not working. Should I adjust things? – Justme Nov 16 '16 at 7:56
  • @Justme where did you put your sitename.js file? If in a module or subtheme you'll need to either add it into the .info file so it's loaded, or call drupal_add_js() somewhere else to get it on the page. Can you see it being added in the page source? – jenlampton Nov 21 '16 at 19:38
  • Thxs solved it. I did not knew that this should be between: (function($) { and })(jQuery); in the js file. Works like a sharm !! – Justme Dec 5 '16 at 8:15
0

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.

  • 2
    You're using the old Drupal.behaviors declaration style; it won't work for Drupal 7. It would need to be Drupal.behaviors.themename = { attach: function (context, settings) { // .... See Managing JavaScript in Drupal 7 for more info – Clive May 7 '12 at 16:55
  • Declaration style fixed – Eugene Fidelin Nov 6 '12 at 16:16
  • What values should be replaced from this script 'node-form'? – pal4life Apr 22 '15 at 20:36
  • I tried to get this working in adminimal theme but no luck. Rename themename with adminimal and copied the complete code in sitename.js and added this to theme info file. Still I get easily more submits of the same form. – Justme Nov 16 '16 at 8:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.