Using hx-disabled-elt on form associated/external submit button

[BregtDeLange]

I want to disable a submit button when a request is in flight. My submit button is outside the form, but I associate it with the "form" attribute.

<form hx-post="...">

</form>

<button type="submit" form="@formId" hx-disabled-elt="this" id="submit-button">
    Submit
</button>

However, the hx-disabled-elt doesn't add the disabled attribute when the request is happening. I understand that this button is not technically part of the form yet it is associated with it. I can add hx-disabled-elt to the form and use an id to make sure they're connected

<form ... hx-disabled-elt="#submit-button">`

</form

But that feels a bit verbose as I might have several submit buttons for the same button.

I tried a script as well but feels too much hacking into the request flow

// Simplified
document.body.addEventListener("htmx:beforeSend", (evt) => {
    const target = evt.detail.elt;

    if (target.tagName === "FORM" && target.id) {
        const externalButtons = document.querySelectorAll(`button[form="${target.id}"]`);
        externalButtons.forEach((btn) => {
            btn.classList.add("htmx-request");
            btn.disabled = true;
        });
    }
});

So I'm a bit unsure what approach I take best here. What are my options?

[HimashaHerath]

Good question! The root cause is that hx-disabled-elt only works relative to the request initiator — since hx-post is on the <form>, htmx manages the request lifecycle there, not on the external button.

Here are your cleanest options:

---

Option 1: Move hx-post to the button (recommended)

Put the htmx attributes on the button and use hx-include to pull in the form data:

<form id="my-form">
  <!-- form fields -->
</form>

<button type="submit"
        form="my-form"
        hx-post="/endpoint"
        hx-include="#my-form"
        hx-disabled-elt="this">
  Submit
</button>

Now the button is the request initiator, so hx-disabled-elt="this" works exactly as expected.

---

Option 2: Use a shared class for multiple buttons

If you prefer keeping hx-post on the form, use a class selector on hx-disabled-elt — this scales cleanly to multiple buttons without repeating IDs:

<form hx-post="/endpoint" hx-disabled-elt=".submit-btn">
  <!-- form fields -->
</form>

<button type="submit" form="my-form" class="submit-btn">Submit</button>
<button type="submit" form="my-form" class="submit-btn">Save Draft</button>

---

Option 3: CSS with htmx-request

htmx adds the htmx-request class to the initiating element during the request. You can target external buttons purely with CSS:

form.htmx-request ~ button[type="submit"] {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

Note: this does not set the disabled attribute, but covers most UX needs without any JS.

---

Option 1 is the most idiomatic HTMX approach. Option 2 is best when you need to keep hx-post on the form and have multiple buttons. Option 3 is a pure CSS fallback if you want zero extra attributes.