]> 2026-04-30T06:56:56+02:00 ShowOnSelect 50000 en Doc 225 Show or hide elements based on a form input change User ShowOnSelect (1.0,1.1) 1.0 1.1 ShowOnSelect 2022-02-15T18:41:18Z 2459626.2786806 ShowOnSelect 2025-07-15T08:59:48Z 2460871.8748611 Doc/FlexForm/1.0/ShowOnSelect 77 https://wikibase-solutions.com/developer-logs/flexform-show-on-select?WSLanguage=en FORM CANNOT BE RENDERED, NOT VALIDATED 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 > 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 > 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 > 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 > 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 > 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 > 1 2 3 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 50000 0 plainlist 1 [[:DevOps:Doc/FlexForm/1.0/ShowOnSelect]] Doc/FlexForm/1.0/ShowOnSelect# QUERY54118ff6f2b2b6575f8e08c4e98a567c