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:
Thus, the user will only be able to enter fixed values. I want the user to make changes to the custom values. Like this:
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?
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:selectOneMenu>
<h:panelGroup id="input">
<h:inputText value="#{bean.customType}" rendered="#{bean.type == 'custom'}" required="true" />
</h:panelGroup>