Now I'm solving an unrelated issue. But I'll work on this tomorrow. Thank you so much for these pointers. Super helpful.

I have a helper method in my web framework which sends the hx-refresh/redirect header as a reply so I can call abort and_redirect('url') on my server, its super useful 🙂

since it will make the client redirect even if the request is for a partial.

A slight variation of what @User suggested that we use with jquery.validate, is the handy trigger filter mechanism, i.e. something like this:

<form id="myform" hx-trigger="submit[$(target).valid()]" ... >

the slight benefit being you don't need to trigger custom events, since you're just directly wiring in the jquery.validate valid() call to be made when the normal submit event is fired on the form

What makes you think an extension would be a good fit? With the latest version, I find that with a minimal amount of js, we can easily handle errors. Is it because you don’t want at all to write js in your projects? IMO, I think I’d prefer to keep control and write a few lines of js, as the error handling could potentially be different between projects. Here is what I do for example for my current pet project:

document.body.addEventListener('htmx:beforeSwap', function(event) {
        var status = event.detail.xhr.status

        // allow to swap on certain http codes when
        // the error is rendered from the server 
        if ([422, 409].includes(status)) {
          event.detail.shouldSwap = true
        }

        // flash if other error
        if (!event.detail.shouldSwap && status >= 400 && status < 600) {
          document.getElementById("flash").innerHTML = '<p>{{ "An error has occurred" | translate }}</p>'
        }
      })

You could also send a specific event from the server using the HX-Trigger header and handle it with hyperscript. This way you don't need javascript at all.

<div _="on error call alert('Oops! Something went wrong')" hx-get="/some_route">

You can also pass messages (like the code) in the HX-Trigger header

Thanks for this idea. I don’t use events that much so far, but they seem to be handy. I need to think a little bit to see if that could fit for me. Because I have a generic way of rendering my flash errors on the server. Errors are automatically retrieved (and deleted) from the session on rendering and injected into the response (as an out of band when rendering a partial). So at the moment, I can’t have them retrieved afterwards, in a future ajax request (as already deleted from the session).

Also, I try to use Hyperscript/Alpine for "localized behaviors", attached to specific "components" in the html. When I deal with global behaviors, I tend to prefer a few lines of js. It does not make much sense to me to attach a generic behavior to a specific html tag.

For the flash error message at the moment I'm sending a partial template from the server whenever there is an error and I use hx-swap-oob="true" to replace the div with a specific id. Somewhere in my HTML I have an empty container:

<div id="flash-message" hx-swap-oob="true"></div>

and everytime there is an error I send a partial template with the same container but including the error inside. Then htmx will replace the previous container with the new container.

I exactly do the same 😛

Its all about putting the logic client side or server side. the rational is the same as your : handling error in htmx with non 200 code. i find that handling error with js is precisely the opposite of htmx's greatness: handling most frequent usage/needs without js.

Hi guys, I hope someone can answer my dumb-ass question. I have built a form that contains several radiobuttons. How can i make a change in a radiobutton value submit the surrounding form using HTMX? In the past i would write custom eventhandlers that serialize the form and perform an async post. But im hoping that htmx has something built-in. 😋

Look at hx-trigger. You can specify a “from:” element.

So something like

<form hx-post=“/myserver” hx-trigger=“on change from:find #radioid”>

Hi Benpate, So if i have a form containing multiple (radiobutton, checkbox) inputs and a submit button , than i could decorate those elements with a “js-submit” css class. And then specify that class in the “from:” modifier of the hx-trigger attribute on the form? I’m gonna try it out 🙂 Thanks for your reply.

You’re welcome. And yes, you can put in any CSS selector, so you can trigger the form post from an ID (one element) or from a class (any element). It’s even cooler than I originally thought 😀

do we really need the "on" and "find"? Couldn't we do something like

<form hx-post=“/myserver” hx-trigger=“change from:#radioid”>

I haven’t used this feature myself, so experiment on it and see. Yes, if you’re targeting am I’d, from: would probably be better. For classes, I think find: limits the search to children of the element, so it’s more targeted.

🙂 ben has hyperscript on his mind. @User you probably want something like this:

html
  <form hx-post="/myserver" hx-trigger="change from:#radioid">
     ....
  </form>

Thanks, im gonna try it out

Thank you for the event notes. I used that and worked like a charm. Very happy with the simplicity of it all. Now, regarding the error, I found I had forgotten to comment out a line of code that was duplicating a call. But anyways, with the event I don’t need that approach anymore. Thank you for everything!

So, we tried this approach with a form that contains multiple input elements (radiobuttons) and a submit button. When the hx-trigger attribute was added, then the (boosted) form was no longer submitted by clicking the submit button. So we ditched the submit button because it was kinda redundant, but would have preferred to keep it because of progressive enhancement filosophy.

Could you put the

hx-get

on the option itself?

rather than on the form?

It sounds like you want two different types of requests: the option drives some UI update and the form submits itself

e.g.

html
  <form hx-boost="true" ... >
    ...
   <label for="cars">Choose a car:</label>
<select id="cars" hx-get="/car-details" hx-target=#something-else">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
  ...
</form>

so the select drives the dynamic UI within the form, but the form still submits the normal way

?

FYI After that we saw some funky behaviour with the browser back-button. When clicking a radiobutton in the form, htmx issues an async request, partially updates the page and updates the url (which all works nice 👍🏼 ) Hitting the browser back-button after clicking a few radiobuttons updates the url querystring and searchresults div, but the selected radiobutton in the filters form is not updated. I will probably investigate this tomorrow 🙂

Will try this out tomorrow. Thanks 🙏🏼