ShowOnSelect

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 show-on-select="show-on-select">
	<select name="selectme" id="selectme" >
		<option for="selectme" show-on-select="testingId2" selected="selected" value="1">1</option>
		<option for="selectme" show-on-select="testingId" value="2">2</option>
		<option for="selectme" show-on-select="testingId3" value="3">3</option>
	</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 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 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>

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

<form 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 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" >
		<option for="selectme" show-on-select="testingId2" selected="selected" value="1">1</option >
		<option for="selectme" show-on-select="testingId" value="2">2</option >
		<option for="selectme" show-on-select="testingId3" value="3">3</option >
	</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" >
		<option for="selectme2" show-on-select="testingId2" selected="selected" value="1">1</option >
		<option for="selectme2" show-on-select="testingId" value="2">2</option >
		<option for="selectme2" show-on-select="testingId3" value="3">3</option >
	</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!
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.
When you have multiple select elements in a form, you need to add the for= argument to every option field. The value should be the value of the select id argument. This ways, regardless in what order MediaWiki will parse the form element, FlexForm will always know what option fields belong to what select element.

Links

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