Dialogs

Dialogs can be triggered with the hx-prompt and hx-confirm attributes. These are triggered by the user interaction that would trigger the AJAX request, but the request is only sent if the dialog is accepted.

<div>
  <button class="btn"
          hx-post="/submit"
          hx-prompt="Enter a string"
          hx-confirm="Are you sure?"
          hx-target="#response">
    Prompt Submission
  </button>
  <div id="response"></div>
</div>

The value provided by the user to the prompt dialog is sent to the server in a HX-Prompt header. In this case, the server simply echos the user input back.

User entered <i>${response}</i>

<div>
  <button class="btn"
          hx-post="/submit"
          hx-prompt="Enter a string"
          hx-confirm="Are you sure?"
          hx-target="#response">
    Prompt Submission
  </button>
  <div id="response"></div>
</div>

Demo