I have a survey form submitted using hx-post. There are multiple buttons that can be used to submit the form - Prev, Next, Finish. This all works fine. However, I wish to display a confirmation alert only when the Finish button is used to submit the form.
I have hx-confirm configured on the form attribute, which, by default, fires for all buttons. The docs indicate that this can be overridden using inheritance., but this doesn't seem to work. I should be able to unset the confirmation dialogue, or even update the message, but it doesn't work for me.
See: https://codesandbox.io/s/htmx-forked-96fnd7?file=/index.html
Anyone else tried this? Or is there another way to trigger the dialogue conditionally?
It works fine if you include the hx-post within button element instead of the form:
<form hx-confirm="Parent confirmation messageddd">
<input type="text" name="name" />
<button hx-post="https://codesandbox.io/" type="submit">
Save with confirmationx
</button>
<div>
<button hx-post="https://codesandbox.io/" type="submit" hx-confirm="Inherited confirmation message">
Save with inherited message
</button>
<button hx-post="https://codesandbox.io/" type="submit" hx-confirm="unset">
Save without confirmation
</button>
</form>