]> 2026-04-30T14:54:15+02:00 ShowOnSelect 50000 en Doc 225 Show or hide elements based on a form input change User ShowOnSelect (2.0,2.1,2.5) 2.0 2.1 2.5 ShowOnSelect 2023-01-04T13:08:51Z 2459949.0478125 ShowOnSelect 2026-03-30T07:35:32Z 2461129.8163426 Doc/FlexForm/2.0/ShowOnSelect 359 https://wikibase-solutions.com/developer-logs/flexform-show-on-select?WSLanguage=en 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 > 1 2 3 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 > test checked 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 > test checked test unchecked 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 > 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 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 > 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" > < 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 > 1 2 3 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" > < 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 > 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. 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 50000 0 plainlist 1 [[:DevOps:Doc/FlexForm/2.0/ShowOnSelect]] Doc/FlexForm/2.0/ShowOnSelect# QUERY06f788e586bf848f8f832d67ce361abc