How to display an inputText when specific selectOneMenu option is selected?

Question

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

This way the user will be able to enter only fixed values. I want to give a change to the user to enter custom values. Like this:

I want to create selectOneMenu with option custom. When the user selects custom the selectOneMenu will be replaced with inputText field where he will be able to enter the custom value. SAVE button will save the data into database. Is this possible without page reload? Maybe with AJAX?

How this can be implemented?

Answer 1

Use <f:ajax> to display a <h:inputText> whenever the current option equals "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>