Josherich's Blog

HOME SHORTS PODCAST SOFTWARES DRAWING ABOUT RSS

htmx Pattern Broken but Completely Compliant

01 Jan 2025

Unchecked boxes don’t submit any data to the server because there’s no unchecked state. This is a nice little quirk when you enjoy the freedom from the endless leaks of JavaScript abstraction.

From MDN:

Note: If a checkbox is unchecked when its form is submitted, neither the name nor the value is submitted to the server. There is no HTML-only method of representing a checkbox’s unchecked state (e.g. value=unchecked). If you wanted to submit a default value for the checkbox when it is unchecked, you could include JavaScript to create a <input type="hidden"> within the form with a value indicating an unchecked state.

So in fast-html, as in regular HTML, the solution is to put a hidden input with the value ‘off’, so that when the checkbox is unchecked, the hidden input is submitted instead. When the checkbox is checked, the hidden input is also submitted along with the check status.

Input(type='checkbox',
  checked=checked,
  name=f'{tag.id}',
  id=f'tag-item-{tag.id}'
),
Input(type='hidden', name=f'{tag.id}', value='off'),