Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026
The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.
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:
<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
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:
<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>