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 shows 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 5 shows an example of how to use show-on-select when a certain value is used. You can use this on e.g. an input field of type text. When a certain text is entered it will trigger the show on select

Example

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

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

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

<_form action="addToWiki" show-on-select="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="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="show-on-select" >
	<_input type="checkbox" show-on-checked="test A" show-on-unchecked="test B" />
	<div show-on-select-trigger="test A">test checked</div>
	<div show-on-select-trigger="test B">test unchecked</div>
</_form>



Example 5 : show-on-select when a user input equals a predefined value

<_form action="addToWiki" show-on-select="show-on-select" >
	<_input type="text" show-on-select="testingId" name="test" /> The predefined value is "testingValue"
	<div show-on-select-trigger="testingId" show-on-select-type="equals::testingValue">
		<span> Show this when the input value is equal to the text: testingValue </span>
	</div>
</_form>


Note

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

Links