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?
source to share
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>
source to share