Skip to content

htmx trigger request via JS event

New Courses Coming Soon

Join the waiting lists

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":

	  if ( === 'myoption') {
        new Event('myevent')
	  hx-trigger="myevent from:body"
	  Select this option
→ Get my JavaScript Beginner's Handbook
→ Read my JavaScript Tutorials on The Valley of Code
→ Read my TypeScript Tutorial on The Valley of Code
→ Read my HTMX Tutorial on The Valley of Code
→ Read my Alpine.js Tutorial on The Valley of Code

Here is how can I help you: