htmx, include hidden input fields outside of a form
New Courses Coming Soon
Join the waiting lists
Using htmx I had a list of items, think a list of tasks, with task text and more details, and inside this list a “delete button”.
I had the need of sending some information that you’d usually use a hidden input element for.
Something invisible to the user but essential for my app needs.
But I couldn’t use a form for this, I just used a button
element, because we can’t nest forms.
Turns our we can use the hx-vals
attribute and pass a list of key-value pairs that are going to be added to the request just like a hidden input field would:
<button hx-delete="/item/..." hx-vals='{"key": "value"}' hx-target="#response">
Delete
</button>
→ 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:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X