I don’t know what’s wrong in my code, hx-disabled-elt not disabling my button!
<form
id="goal-form"
hx-post="/goals"
hx-target="#goals"
hx-swap="beforeend"
hx-on::after-request="this.reset()"
hx-disabled-elt="form button">
<div>
<label htmlFor="goal">Goal</label>
<input type="text" id="goal" name="goal" />
</div>
<button type="submit">Add goal</button>
</form>
1
I would suggest your css selector isn’t correct.
Try something like
<button type="submit" id="submit-button">Add goal</button>
and set hx-disabled-elt="#submit-button" in form
Edit:
Regarding docs find button seems best way to target the button in your example.
https://htmx.org/attributes/hx-disabled-elt/
I tested your and my solution which works both. But nevertheless some research on github gives me conclusion that this feature is still a bit buggy and the behavior may vary depending on htmx version. I recommend testing 1.9.12 or 2.0.2.
simply add this script tag to your html and change version number
<script src="https://unpkg.com/[email protected]"></script>
4