Disable Submit Button on Forms PHP with Jquery - Drupal 9

Case use: We had a form that was a memory hog so it took a long time to load the next step. Users kept clicking the Next button which was really a "Submit" button that created a user account, so we had duplicate user accounts being made.
So this solution will disable the button, change the test of the button to "Processing" so users will not keep clicking on it. :)

Your JS file

Mine is in my custom themes folder in a JS sub-folder with the title scripts.js.
(Don't forget to put your file's path in your themes.libraries.yml file. Mine is js:
    js/scripts.js: {}
  dependencies:
    - core/jquery)

 

OK Here is what goes into your JS file.

$('.your-form').on('submit', function() {
    var self = $(this),
    button = self.find('input[type="submit"], button');
    submitValue = 'Processing...';

    button.attr('disabled', 'disabled').val((submitValue) ? submitValue : 'Creating account..');

});

 

And here is what goes into your PHP form file

 $form['actions']['next'] = [
      '#type' => 'submit',
     
'#attributes' => array("onclick" => "
      jQuery(this).addClass('disabled');;"),
      '#value' => $this->t('Next'),
      '#name' => 'next',
      '#ajax' => [
        'callback' => '::stepAjaxCallback',
        'wrapper' => $wrapper,
      ],
    ];

 

Yay!