Name

showonselect

Type

_form

Synopsis

Show or hide elements based on a form input change

Description

This allows to show elements in a form based on a selection option, a checkbox status or radio button status.

You can create a complete form with certain form elements hidden based on a selection in the form done by a user.

Parameters

show-on-select on the _form tag

For it all to work you must let FlexForm know you want to use Show On Select by adding a parameter to the _form tag. See example 1.


show-on-select on a select field

The actual show-on-select attribute is added to an option field within a select field. The value of show-on-select will be used to show a show-on-select-trigger with the same name. See example 2.

This will show an additional text input field with the name texttest1 when you select option 1 and texttest2 will be hidden. When option 2 is chosen, then texttest2 will be shown and texttest1 hidden.


show-on-checked on a radio button

Example 3 shows you can also add a show-on-select-trigger to something different than a FlexForm _input field. The example will hide the div with the trigger until the radio button is checked.


show-on-checked on a checkbox and show-on-unchecked on a checkbox

Example 4 show an example of how to use show-on-checked for a checkbox field. Checkboxes can have an additional option called show-on-unchecked. So, in the example, if a checkbox is unchecked it will show test B and hide test A. If the checkbox is checked it wish show test A and hide test B

Example

Example 1 : Show or hide elements based on a form input change

<_form action="addToWiki" show-on-select>
</_form>

Example 2 : show-on-select on a select field

<_form action="addToWiki" show-on-select >
	<_select name="selectme" id="selectme" >
		<_input type="option" for="selectme" show-on-select="testingId2" selected="selected" value="1">1</_input>
		<_input type="option" for="selectme" show-on-select="testingId" value="2">2</_input>
		<_input type="option" for="selectme" show-on-select="testingId3" value="3">3</_input>
	</_select>
	<_input type="text" show-on-select-trigger="testingId" name="texttest1" value="2" />
	<_input type="text" show-on-select-trigger="testingId2" name="texttest2" value="1" />
</_form>


Example 3 : show-on-checked on a radio button

<_form action="addToWiki" show-on-select>
	<_input type="radio" show-on-checked="tester"/>
	<div show-on-select-trigger="tester">
		test checked
	</div>
</_form>


Example 4 : show-on-checked on a checkbox and show-on-unchecked on a checkbox.

<_form action="addToWiki" show-on-select >
	<_input type="checkbox" show-on-checked="test A" show-on-unchecked="test B" />
	<div class="hidden" show-on-select-trigger="test A">test checked</div>
	<div class="hidden" show-on-select-trigger="test B">test unchecked</div>
</_form>

FORM CANNOT BE RENDERED, NOT VALIDATED

Note

Form fields that are in a hidden section will not be submitted together with the form!

Links

ws-page-props