Jump to main content Jump to doc navigation

Handling Selects, Checkboxes and Radios

While FormIt can handle any type of field, special directions are required for selects, radios and checkboxes due to their value nature.

Handling Select Fields

FormIt provides a utility snippet, called FormItIsSelected, which can be used as an Output Filter to handle the selected="selected" part of the option. Example:

<select name="color">
   <option value="blue" [[!+fi.color:FormItIsSelected=`blue`]] >Blue</option>
   <option value="red" [[!+fi.color:FormItIsSelected=`red`]] >Red</option>
   <option value="green" [[!+fi.color:FormItIsSelected=`green`]] >Green</option>
   <!-- This would also work -->
   <option value="yellow" [[!+fi.color:is=`yellow`:then=`selected`]]>Yellow</option>
</select>

This will automatically handle the "selected" part of the option field, persisting it through validation and error handling.

Handling Checkboxes and Radios

Handling checkboxes and radios is very similar to handling selects, with the only difference being how you handle "required" validation on them. FormIt provides a FormItIsChecked assistance OutputFilter, similar to FormItIsSelected, for handling value persistence.

This example will handle checkboxes, persisting their values:

<label>Color: [[!+fi.error.color]]</label>
<input type="checkbox" name="color[]" value="blue" [[!+fi.color:FormItIsChecked=`blue`]] > Blue
<input type="checkbox" name="color[]" value="red" [[!+fi.color:FormItIsChecked=`red`]] > Red
<input type="checkbox" name="color[]" value="green" [[!+fi.color:FormItIsChecked=`green`]] > Green

Note that the [] is stripped when setting the "fi.error.color" placeholder.

Handling Required on Checkboxes

Since HTML does not send a value if a checkbox is not checked, handling the "required" validation on a checkbox can be tricky. You'll need to add a "hidden" field before so that at least an empty value is sent:

[[!FormIt? &validate=`color:required`]]
...
<label>Color: [[!+fi.error.color]]</label>
<input type="hidden" name="color[]" value="" />
<input type="checkbox" name="color[]" value="blue" [[!+fi.color:FormItIsChecked=`blue`]] > Blue
<input type="checkbox" name="color[]" value="red" [[!+fi.color:FormItIsChecked=`red`]] > Red
<input type="checkbox" name="color[]" value="green" [[!+fi.color:FormItIsChecked=`green`]] > Green

This will successfully check to make sure at least one checkbox was selected when submitting the form.

Handling Checkboxes and Multiple Selects in a Custom Hook

If you want to set an array field (i.e. a checkbox group with the same name, a select multiple field) in a preHook, you have to json_encode the array value.

$hook->setValue('hobbies',json_encode(array('music','films','books')));

See Also

  1. FormIt.Examples.Custom Hook
  2. FormIt.Examples.Simple Contact Page
  3. FormIt.Handling Selects, Checkboxes and Radios
  4. FormIt.Using a Blank NoSpam Field

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

  • modmore
  • STERC
  • Digital Penguin
  • Jens Wittmann – Gestaltung & Entwicklung
  • Fabian Christen
  • Dannevang Digital
  • Sepia River Studios
  • Chris Fickling
  • CrewMark
  • deJaya
  • eydolan
  • Following Sea
  • Lefthandmedia
  • Murray Wood
  • Anton Tarasov
  • Stéphane Jäggi
  • Raffy
  • Snow Creative
  • Nick Clark
  • A. Moreno
  • JT Skaggs
  • Helen
  • YJ
  • krisznet
  • Richard
  • Yanni

Budget

$311 per month—let's make that $500!

Learn more