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
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>
Please log in first.
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>
Please log in first.
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>
Please log in first.
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>
Please log in first.
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>
Please log in first.
Note
Form fields that are in a hidden section will not be submitted together with the form!
