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:

<ul>
  {tasks.map(task => 
    <li>
      Task: {task.name}
      <button
        hx-confirm="Are you sure?"
        hx-target="closest li"
        hx-swap="outerHTML"
        hx-delete={`/task/${task.id}`}>
        Delete
      </button>
    </li>
  )}
</ul>

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

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

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

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
14:	Redirect after request
15:	Send files using htmx.ajax()
16:	Perform something on page load
17:	Conditionally hide HTML elements based on HTMX request status
18:	htmx + Alpine template tag
19:	htmx, include hidden input fields outside of a form
20:	htmx trigger request via JS event