8

I want to disable the submit button after it is clicked to prevent multiple submissions. I have:

$form['show'] = [
'#type' => 'submit',
    '#value' => $textforsubmitbutton,
    '#name' => 'submit',
    '#attributes' => array("onclick" => "javascript: this.disabled = true;"
    ),
];

but this disabled the button completely. Using "onsubmit" in place of "onclick" doesn't change anything on the button. So maybe I need something like:

    '#attributes' => array("onclick" => "javascript: this.submit; this.disabled = true;"
    ),

How do i fix this?

6 Answers 6

6

For those wanting to disable the form submit button on load, try this:

$form['actions']['submit']['#attributes']['disabled']  = 'disabled';
2
  • Exactly what I was looking for, thanks. I was trying to use ['submit']['#disabled'] = TRUE;. Apr 8, 2019 at 7:41
  • And 'hidden' => 'hidden' for whom would like to hide it (even if its not the exact need of this topic, it could help others).
    – Pauleau
    Oct 18, 2022 at 6:53
4

In your context, this refers to the submit input element which doesn't have the method submit(). You can use some jQuery to disabled the element on click then find the form element to submit.

'#attributes' => array("onclick" => "
      jQuery(this).attr('disabled', true);
      jQuery(this).parents('form').submit();
"
3

I am using bootstrap - that's where i found the solution finally:

'#attributes' => array("onclick" => "
      jQuery(this).addClass('disabled');;
")

Works perfectly!

1
  • This solution works perfectly, even handled failed validation on submit and re-enables the button. May 6, 2022 at 15:32
1

I faced the same issue. This works fine for me, although I don't like inlining this piece of js and would move it to a .js file.

$form['actions']['submit']['#attributes']['onclick'][] = "
  event.preventDefault();
  if (!form.reportValidity()) {
    form.reportValidity();
  }
  else {
    jQuery(this).after('<div class=\"ajax-progress ajax-progress-throbber\"><div 
      class=\"throbber\">&nbsp;</div></div>')
    jQuery(this).attr('disabled', true);
    jQuery(this).closest('form').submit();
  }
";

This adds the default ajax loading icon and disables the submit button. I did that for the custom Drupal commerce module. Also, this makes the default browser validation work using reportValidity(). Well, except for IE of course.

0

This might help https://www.drupal.org/project/inline_entity_form/issues/3160683

just simply insert drupal/core form JS to prevent the duplication issue.

$form['#attached']['library'][] = 'core/drupal.form';
0

For those wanting a separate JS file to better manage the JS, you can create a library and attach an event.

Add the library to your my_module.libraries.yml file.

my_module.disable_on_click:
  version: VERSION
  dependencies:
    - core/drupal.form
    - core/jquery
  js:
    js/my_module_disable_on_click.js: { }

Attach the library to your form.

$form['#attached']['library'][] = 'my_module/my_module.disable_on_click';

Also add a class to your submit button. (You may wish to append or replace class, whatever you'd prefer).

$form['actions']['submit'] = [
    '#attributes' => [
      'class' => ['disable-on-click'],
    ],
  ];

Now you're free to edit js/my_module_disable_on_click.js how you want. This is mine that disables submit, adds the ajax loading gif and submits the form.

(function ($) {
  'use strict';

  Drupal.behaviors.disableOnClick = {
    attach: function (context, settings) {

      $('.disable-on-click').on('click', function(event) {
        $(event.target).prop('disabled', true);
        let button_text = $(event.target).text();
        $(event.target).html(button_text + ' <img src="/core/misc/throbber-active.gif">');
        $(event.target).parents('form').submit();
      });

    }
  };

}(jQuery));

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.