Jump to content

form with htmx


Recommended Posts

Has anybody a simple example, how htmx works in the frontend, please, e.g. with form:

<input type="text" name="q"
    hx-trigger="keyup changed delay:500ms"
<div id="search-results"></div>


Link to comment
Share on other sites

HTMX will see the hx- attributes on your element and send a GET request to yourdomain.at/trigger_delay with the value of the input named “q” whenever it is triggered. Whatever the server sends as a response, HTMX will put in the div at the bottom (HTMX calls this “swapping“).

Or something like that. I’m not familiar enough with HTMX’s defaults and the trigger syntax to be sure that your code will definitely work. Looks good though. The important parts happen in /trigger_delay, obviously. That is in keeping with HTMX’s whole raison d’être of mostly sticking to doing things on the server.

What’s sticking out to me is the url of your endpoint “/trigger_delay”. It looks like this is supposed to be a page that returns search results or type-ahead suggestions, so I would expect something like “/search”.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Thanks Jan, for your quick reply. I had a small configuration error in the backend, which is why htmx did not work immediately. I use htmx for the first time, so I looked for the error in the wrong place 😔 Thank you for the quick response time. It's always inspiring to see how helpful everyone is here!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...