htmx
htmx copied to clipboard
putting a hx-trigger on a form cause the form to reload full page when submitted
This form work as expected
<form hx-post="/grid" hx-target="#grid" >
<input type="search" name="text" />
<button type="submit">Cerca</button>
</form>
this one, make a full page reload
<form hx-post="/grid" hx-target="#grid" hx-trigger="load">
<input type="search" name="text" />
<button type="submit">Cerca</button>
</form>
the only difference is the hx-trigger
The workaroud is to add "submit" to the trigger attribute value:
<form hx-post="/grid" hx-target="#grid" hx-trigger="submit,load">
<input type="search" name="text" />
<button type="submit">Cerca</button>
</form>
Watching the source code I see this at the end of the " getTriggerSpecs(elt) " function

So, if the element is a form and the trigger attribute is empty it set a trigger on "submit" event. Otherwise, the form react onlty to the event sepcified in the trigger, and don't react to the 'submit' event any more.
I thing that this is a bug.
This is expected behavior: if you don't specify a trigger, the element uses the "default" event, which in the case of forms is submit. Once you are explicit about the triggers, you need to specify all events you want to trigger the element. In this case, load and submit.