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" >
	<_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>


Example 6 : show-on-select when a user input contains 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="contains::testingValue">
		<span> Show this when the input value is equal to the text: testingValue </span>
	</div>
</_form>


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">
	<_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>


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">
	<_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>


Note

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

Links

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