htmx:confirm

When It Fires

After the request context is built, before the request is sent, when the triggering element has hx-confirm set.

Event Detail

• ctx - Request context object
• issueRequest - Callback function to call to proceed with the request
• dropRequest - Callback function to call to cancel the request

If you call evt.preventDefault(), you must call either issueRequest() or dropRequest(). Failing to call one of them will leave the request pending indefinitely.

Example

htmx.on('htmx:confirm', (evt) => {
  evt.preventDefault(); // Prevent default window.confirm() dialog

  // Show custom modal
  showCustomModal(evt.detail.ctx.confirm).then((confirmed) => {
    if (confirmed) {
      evt.detail.issueRequest(); // User confirmed — proceed
    } else {
      evt.detail.dropRequest(); // User cancelled — drop the request
    }
  });
});

Cancel the default event and call either issueRequest() to proceed with the request or dropRequest() to cancel it.