Attention

TYPO3 v12 has reached end-of-life as of April 30th 2026 and is no longer being maintained. Use the version switcher on the top left of this page to select documentation for a supported version of TYPO3.

Need more time before upgrading? You can purchase Extended Long Term Support (ELTS) for TYPO3 v12 here: TYPO3 ELTS.

JavaScript form helpers

Empty checkbox handling

<input
    type="checkbox"
    name="setting"
    value="1"
    data-empty-value="0"
    data-global-event="change"
    data-action-navigate="$data=~s/$value/"
>

Checkboxes used to send a particular value when unchecked can be achieved by using data-empty-value="0". If this attribute is omitted, an empty string '' is sent.

Submitting a form on change

<input type="checkbox" data-global-event="change" data-action-submit="$form">
<!-- ... or (using CSS selector) ... -->
<input type="checkbox" data-global-event="change" data-action-submit="#formIdentifier">

Submits a form once a value has been changed. ($form refers to the parent form element, using CSS selectors like #formIdentifier is possible as well)