How to display inputText when selectOneMenu option is selected?

I want to create a settings panel for an application. The application will store the parameter values ​​in the database table. The settings panel will be used to display settings and change values. I want to represent the values ​​this way:

enter image description here

enter image description here

Thus, the user will only be able to enter fixed values. I want the user to make changes to the custom values. Like this:

enter image description here

I want to create selectOneMenu

with option custom

. When the user selects custom

, it selectOneMenu

will be replaced with a field inputText

where he can enter a custom value. The button will SAVE

save the data to the database. Is this possible without reloading the page? Maybe with AJAX?

How can this be done?


source to share

1 answer

Use <f:ajax>

to display <h:inputText>

when the current option is "custom"


<h:selectOneMenu value="#{bean.type}">
    <f:selectItem itemValue="one" itemLabel="Option one" />
    <f:selectItem itemValue="two" itemLabel="Option two" />
    <f:selectItem itemValue="three" itemLabel="Option three" />
    <f:selectItem itemValue="custom" itemLabel="Define custom value" />
    <f:ajax render="input" />
<h:panelGroup id="input">
    <h:inputText value="#{bean.customType}" rendered="#{bean.type == 'custom'}" required="true" />




All Articles