Submit form and disable submission button

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

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

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.

To remove the button in hook_form_alter() simply unset the submit action.

unset($form['actions']['submit']);

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

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

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

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

Works perfectly!

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