HTMX Prompt Default Value

hx-prompt is an awesome attribute that allows you to easily get a simple input string from your user. It usually goes like this:

<button 
    hx-post="/change-username" 
    hx-target="#content"
    hx-prompt="Enter your new username">
  Change Username
</button>

That’s all good, but what if you want to pre-fill a default value in your prompt, HTMX doesn’t allow you to do that. Luckily the solution is just a few lines long.

Javascript

Let’s create a JavaScript function, that will get us the user input with the window.prompt function. It’s what HTMX uses anyway.

Then we will use HTMX to make the request, that way the server thinks that the request was sent with hx-prompt and we don’t have to change anything on the backend.

function changeUsernamePrompt(message, _default) {
     let user_input = prompt(message, _default)
     if (user_input === null) return // user cancelled
 
     htmx.ajax(
         "POST",
         "/change-username",
         {
             target: "#content",
             headers: {
                 "HX-Prompt": user_input
             }
         }
     )
 }

You see I pretty much translated all the hx-* attributes into the ajax function call. The important part is just the HX-Prompt header with the user input payload.

Back in HTML

All that’s left to do is to call the function on our button click.

<button 
    onclick="changeUsernamePrompt('Enter your new username', 'Vojta')"
    >
  Change Username
</button>

If you are server-side rendering the HTML, be careful not to mix up the quotes in the function call!