Triggers, forms, and feedback
Prevent duplicate submissions
Temporarily disable the relevant control while the server processes a request and make the endpoint safe if duplicates still arrive.
8 minute lesson
Disable the relevant control while its request is in flight:
<form action="/orders" method="post"
hx-post="/orders"
hx-disabled-elt="find button">
<!-- order fields -->
<button type="submit">Place order</button>
</form>
HTMX adds the native disabled attribute before sending and removes it when the request finishes. this, closest, find, next, and previous selectors let you choose the right scope. Disable only what would repeat or conflict with the operation; freezing the whole page is rarely necessary.
This improves the interface but is not a data-integrity guarantee. A client can bypass the attribute, two tabs can submit together, and a retry may arrive after the first response was lost.
For costly operations, send an idempotency key or enforce a server-side uniqueness constraint. The endpoint should recognize the same logical operation and return its existing result instead of creating a duplicate.
Use network throttling and double-click deliberately. Then replay the request outside the page. The server—not the temporary disabled state—must keep the data correct.
Lesson completed