htmx: Confirming actions, and prompts

A handy utility in htmx is hx-confirm which allows you to let the user confirm an action.

For example you have a delete button to delete an item in a list, and you don’t want the user to lose data if accidentally pressing the button.

So you add hx-confirm, adding some confirmation text:

  { => 
      Task: {}
        hx-confirm="Are you sure?"
        hx-target="closest li"

(Notice I used some Astro templating to print the tasks list, to show you how I used this feature).

You can also ask for some information to the user in a prompt, using hx-prompt:

<button hx-delete="/project" hx-prompt="Enter the project name to confirm">
  Delete project

This information is sent in the HX-Prompt HTTP request header.

Lessons in this unit:

0: Introduction
1: Why htmx
2: The core idea of htmx
3: Installing htmx
4: Doing a GET request
5: Swap
6: POST request
7: Targets
8: Loading indicator
9: ▶︎ Confirming actions, and prompts
10: Triggers
11: Request headers
12: Response headers
13: Events