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 equalled. You can use this on e.g. an input field of type text. When a certain text is entered and it equals a predefined value it will trigger the show on select

Example 6 shows an example of how to use show-on-select when a certain value is found. You can use this on e.g. an input field of type text. When a certain text is entered and it contains a predefined value it will trigger the show on select

Example 7 shows an example of how to use show-on-select when one or two conditions need to be selected before show-on-select is triggered. ( OR Trigger ) The example will show a div when a value is selected in a selectbox OR a checkbox has been checked

Example 8 shows an example of how to use show-on-select when two conditions need to be selected before show-on-select is triggered. ( AND Trigger ) The example will show a div when a value is selected in a selectbox AND a radio button has been selected

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" restrictions="lifted" >
	<_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" restrictions="lifted" >
	<_input type="radio" show-on-checked="tester"/>
	<div show-on-select-trigger="tester">
		test checked
	</div>
</_form>

test checked

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

<_form action="addToWiki" show-on-select="show-on-select" restrictions="lifted"  >
	<_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>

test checked
test unchecked

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

<_form action="addToWiki" show-on-select="show-on-select" restrictions="lifted" >
	<_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" restrictions="lifted" >
		<span> Show this when the input value is equal to the text: testingValue </span>
	</div>
</_form>

The predefined value is "testingValue"
Show this when the input value is equal to the text: testingValue

Example 6 : show-on-select when a user input contains a predefined value 

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

The predefined value is "testingValue"
Show this when the input value contains to the text: testingValue

Example 7 : The example will show a div when 2 is selected in the select box OR the checkbox has been checked 

<_form show-on-select="show-on-select" restrictions="lifted" >
	<_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="checkbox" show-on-checked="test A" />

	<div show-on-select-trigger="testingId||test A">
		This will be shown if one of the conditions is true
	</div>
</_form>

This will be shown if one of the conditions is true

Example 8 : The example will show a div when 2 is selected in the select box AND the radiobutton is selected 

<_form show-on-select="show-on-select" restrictions="lifted" >
	<_select name="selectme" id="selectme2" >
		<_input type="option" for="selectme2" show-on-select="testingId2" selected="selected" value="1">1</_input>
		<_input type="option" for="selectme2" show-on-select="testingId" value="2">2</_input>
		<_input type="option" for="selectme2" show-on-select="testingId3" value="3">3</_input>
	</_select>
	<_input type="radio" show-on-checked="test A" />

	<div show-on-select-trigger="testingId&&test A">
		This will be shown if both conditions are true
	</div>
</_form>

This will be shown if both conditions are true

Note

  • Form fields that are in a hidden section will not be submitted together with the form!
  • Currently if the AND or OR triggers are wrongly defined, no form will be rendered. It's on the list to be fixed.
  • There is one notable difference between the way FlexForm and Page Forms let you tie multiple selectors to the same selectable area, aside from differences in their choice of attributes. Where PageForms insists that each selectable area has a unique ID and lets you connect it to one or multiple selectors, FlexForm lets you assign one or multiple identifiers (show-on-select-trigger) to each selectable area while insisting that the show-on-select attributes are unique to individual selectors.

Links

Tutorial on show-on-select : https://wikibase-solutions.com/developer-logs/flexform-show-on-select?WSLanguage=en

Retrieved from "https://www.open-csp.org/index.php?title=DevOps:Doc/FlexForm/1.0/ShowOnSelect&oldid=1840"