| CARVIEW |
Select Language
HTTP/2 301
cache-status: "Netlify Edge"; fwd=miss
content-type: text/html
date: Sat, 27 Dec 2025 11:04:52 GMT
location: /examples/dialogs/
server: Netlify
strict-transport-security: max-age=31536000
x-nf-request-id: 01KDFQQ46J1958X5E1NKQ9K15B
content-length: 98
HTTP/2 200
accept-ranges: bytes
age: 52223
cache-control: public,max-age=0,must-revalidate
cache-status: "Netlify Edge"; hit
content-encoding: gzip
content-type: text/html; charset=UTF-8
date: Sat, 27 Dec 2025 11:04:52 GMT
etag: "a7aaa78b2c49f1f573eee37a6eb09a74-ssl-df"
server: Netlify
strict-transport-security: max-age=31536000
vary: Accept-Encoding
x-nf-request-id: 01KDFQQ4FBF21GDWVAWVC4Z890
content-length: 2996
</> htmx ~ Examples ~ Dialogs
Dialogs
Dialogs can be triggered with the hx-prompt and hx-confirmattributes. 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 primary"
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>
Server Requests ↑ Show