marcus-at-localhost/disable-submit-button-htmx-extension.md

## disable-submit-button-htmx-extension.md

      
    Raw
  

              disable-submit-button-htmx-extension.md
            
          
    <form hx-post="/example" hx-ext="disable-submit">
  <button type="submit" class="hx-disable button-default">Save</button>
</form>
htmx.defineExtension('disable-submit', {
  onEvent: function (name, evt, data) {
    let elt = evt.detail.elt;
    let result = elt.querySelectorAll(".hx-disable");

    if (name === "htmx:beforeRequest") {
      result.forEach(element => element.disabled = true);
      if (elt.classList.contains("hx-disable")) elt.disabled = true;

    } else if(name == "htmx:afterRequest") {
      result.forEach(element => element.disabled = false);
      if (elt.classList.contains("hx-disable")) elt.disabled = false;
    }
  }
});