Skip to content

htmx, include hidden input fields outside of a form

FULL-STACK WEB DEVELOPMENT BOOTCAMP

2024 COHORT SIGNUPS END TOMORROW

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
→ Read my Alpine.js Tutorial
  • Learn modern web development in my BOOTCAMP (SIGNUP END TOMORROW FEB 20, 2024)
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ coding BOOKS, all available in THE VALLEY OF CODE PRO
  • Indie solopreneur internet business masterclass SOLO LAB (summer 2024)