HHH v4

disable form submit button after submit was initiated with Stimulus

Edit
equivalent Web Development
Public
stimulus
turbo
Disable Form Submit after form was submitted  by changing hiding submit button and showing disabled element instead with different text using Stimulus JS

Stimulus adds event listener to Forms that use Turbo

app/javascript/controllers/form_disable_with_controller.js
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="form-disable-with"

// <form data-controller="form-disable-with">
//   <button data-form-disable-with-target="button">Submit</button>
//   <button type="button" disabled="disabled" data-form-disable-target="replacement" class="hidden">Submitting...</button>
//
//   <!-- Optional -->
//   <a data-form-disable-with-target="cancel" data-modal-target="close" class="hidden">Close Modal</button>
// </form>

export default class extends Controller {
  static targets = [ "button", "replacement", "cancel" ]

  connect() {
    addEventListener("turbo:submit-start", this.disable.bind(this))
  }
  disconnect() {
    removeEventListener("turbo:submit-start")
  }

  disable() {
    this.buttonTarget.disabled = true
    this.buttonTarget.classList = "hidden"
    this.replacementTarget.classList.remove("hidden")
    if(this.hasCancelTarget) {
      this.cancelTarget.classList.add("hidden")
    }
  }
}