# htmx + Alpine template tag

> Learn how to make htmx work inside an Alpine template tag by re-processing the form with htmx.process() in x-init once the x-if condition becomes true.

Author: Flavio Copes | Published: 2023-12-15 | Canonical: https://flaviocopes.com/htmx-alpine-template-tag/

I used Alpine’s `<template>` tag for something on my site, and inside this template tag I used some htmx to power a form.

The template was defined like this:

```javascript
<template x-if="$store.showModal">
  <form>...</form>
</template>
```

Problem was, my form only sent GET requests (the default browser behavior) because how template tags work in Alpine is, the HTML is added to the DOM when the template `x-if` directive resolves to `true`.

So basically htmx had no idea about this new HTML.

I had to re-process the form by adding an `id` to the form and then using something like

```javascript
htmx.process(htmx.find('#form-edit-project-name'))
```

Where to add this code?

Inside the `x-init` attribute in the template.

But `x-init` is ran when the element is processed by Alpine (you can test with `x-init="console.log('test')"`).

You want to check, inside `x-init`, for when the condition is true, and _then_ run the htmx processing.

Like this:

```javascript
<template
  x-if="$store.showModal"
  x-init=`
    $watch('$store.showModal', () => {
      if ($store.showModal === true) {
        htmx.process(htmx.find('#form-edit-project-name'))
      }
    })`
>
  <form id="form-edit-project-name">...</form>
</template>
```

For a refresher on `x-if`, `x-init`, `$watch` and the other Alpine directives, see my free [Alpine.js cheatsheet](https://flaviocopes.com/tools/alpine-cheatsheet/).