htmx trigger request via JS event
Writing this down as I wrote this code but then removed from my project and want to keep a reference.
I had a kind of peculiar use case with a <select>
HTML element that contained some options.
If user selected one option, I wanted to perform a network request so I came up with this idea, listening on the change event on the select (the only way to know which option was selected is to set a value on the option).
Using Alpine.js in the example code as I used that in the project and don’t want to rewrite in vanilla JS but it’s not needed.
I dispatched a create-new-team
event on the body, and using htmx I used this event to trigger the GET request using hx-trigger="create-new-team from:body"
:
<select
x-on:change={`
if (event.target.value === 'myoption') {
document.querySelector('body').dispatchEvent(
new Event('myevent')
)
}
`}
>
<option>...</option>
<option>...</option>
<option>...</option>
<option
value="myoption"
hx-get=`/some-url`
hx-trigger="myevent from:body"
hx-target="#target">
Select this option
</option>
</select>
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025