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?

1
  • 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? May 7, 2012 at 17:08

3 Answers 3

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.

4
  • 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, 2012 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, 2013 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, 2016 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, 2016 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;
        }  
      });
    });
  }
};
3
  • 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, 2016 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, 2016 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, 2016 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.

4
  • 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, 2012 at 16:55
  • Declaration style fixed Nov 6, 2012 at 16:16
  • What values should be replaced from this script 'node-form'?
    – pal4life
    Apr 22, 2015 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, 2016 at 8:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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