Disable the submit button of a form (for turbo powered submits)

form_submit_disabler_controller.js

import { Controller } from "@hotwired/stimulus"

/*

Example usage:

<div data-controller="form-submit-disabler" data-form-submit-disabler-disable-with-value="Creating..."
  <form data-form-submit-disabler-target="form">
    <button data-form-submit-disabler-target="submitButton">Create</button>
  </form>
</div>

*/
export default class extends Controller {
  static targets = ["form", "submitButton"]
  static values = {
    disableWith: { type: String, default: "Submitting..." }
  }

  connect() {
    this.formTarget.addEventListener("turbo:submit-start", this.#disableSubmitButton)
    this.formTarget.addEventListener("turbo:submit-end", this.#enableSubmitButton)
  }

  disconnect() {
    this.formTarget.removeEventListener("turbo:submit-start", this.#disableSubmitButton)
    this.formTarget.removeEventListener("turbo:submit-end", this.#enableSubmitButton)
  }

  #disableSubmitButton = () => {
    if (this.hasSubmitButtonTarget) {
      this.submitButtonTarget.disabled = true
      this.originalSubmitButtonText = this.submitButtonTarget.textContent
      this.submitButtonTarget.classList.add("Polaris-Button--disabled");
      this.submitButtonTarget.textContent = this.disableWithValue
    }
  }

  #enableSubmitButton = () => {
    if (this.hasSubmitButtonTarget) {
      this.submitButtonTarget.disabled = false
      this.submitButtonTarget.classList.remove("Polaris-Button--disabled");
      this.submitButtonTarget.textContent = this.originalSubmitButtonText
    }
  }
}

the class Polaris-Button--disabled is added because this controller was created to work with Polaris ViewComponents, replace it with whatever makes sense for you.