htmx/www/content/attributes/hx-confirm.md
matiboy 712ee759f1
Fix confirmed being ignored in htmx:confirm event (#1610)
* Current behavior testing

Testing current library behavior

* Test should remove correct handler

* Add question in htmx:confirm event detail

* Allow skipping window.confirm

* Additional test without hx-confirm value

* Wrap htmx.off in finally

* More correct assertion in case of no calls to confirm

* Remove erroneously added formatting

* Remove erroneously added formatting

* Documentation, fix loop

---------

Co-authored-by: mat <matt@techspace.asia>
2023-10-26 14:43:41 -06:00

1.1 KiB

+++ title = "hx-confirm" +++

The hx-confirm attribute allows you to confirm an action before issuing a request. This can be useful in cases where the action is destructive and you want to ensure that the user really wants to do it.

Here is an example:

<button hx-delete="/account" hx-confirm="Are you sure you wish to delete your account?">
  Delete My Account
</button>

Event details

The event triggered by hx-confirm contains additional properties in its detail:

  • triggeringEvent: the event that triggered the original request
  • issueRequest(skipConfirmation=false): a callback which can be used to confirm the AJAX request
  • question: the value of the hx-confirm attribute on the HTML element

Notes

  • hx-confirm is inherited and can be placed on a parent element
  • hx-confirm uses the browser's window.confirm by default. You can customize this behavior as shown in this example.
  • a boolean skipConfirmation can be passed to the issueRequest callback; if true (defaults to false), the window.confirm will not be called and the AJAX request is issued directly