# htmx trigger request via JS event

> Learn how to trigger an htmx request from a JavaScript event by dispatching a custom event on the body and listening for it with hx-trigger from:body.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2023-12-28 | Topics: [htmx](https://flaviocopes.com/tags/htmx/), [JavaScript](https://flaviocopes.com/tags/js/), [Alpine.js](https://flaviocopes.com/tags/alpine/) | Canonical: https://flaviocopes.com/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"`:

```html
<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>
```

To put together combinations of `hx-get`, `hx-trigger` and `hx-target` like this without checking the docs every time, try my free [htmx attribute builder](https://flaviocopes.com/tools/htmx-builder/).