Submit form and disable submission button

Question

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?

Answer 1

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

$form['actions']['submit']['#attributes']['disabled']  = 'disabled';

Answer 2

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();
"

Answer 3

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

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

Works perfectly!

Answer 4

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.

Answer 5

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';

Answer 6

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));