Question

Hi I have the following code snippet.

The idea behind it is that I want to have a choise and depending on that choise I want to render some additional fields on the form.

So if user answer “Yes” then he should fill additional fields.
This a4j:support part is because I want to keep any user input in other fields (ajaxSingle=”false”) and I don`t want to update model and run any validators until user fills whole form (immediate=”true”). I only want to update one property “bean.answer” (a4j:actionparam) because it controls visible form components.

<h:form id="form">
    ...

    <h:selectOneMenu id="question"
                     value="#{bean.answer}" 
                     required="true">
        <f:selectItem itemLabel="No"  itemValue="false" />
        <f:selectItem itemLabel="Yes" itemValue="true" />
        <a4j:support event="onchange"
                     ajaxSingle="false"
                     immediate="true"
                     reRender="form">
            <a4j:actionparam name="question" 
                             value="$('form:question').value" 
                             assignTo="#{bean.answer}" 
                             noEscape="true"/>
            </a4j:support>
    </h:selectOneMenu>

...

    <h:outputText value="Additional field" 
                  styleClass="boldedFont" 
                  rendered="#{bean.answer}"/>
    <h:inputText  id="fieldId"
                  value="#{bean.additionalFieldValue}"
                  required="true"
                  rendered="#{bean.answer}"/>
...

</h:form>

The above code works as I want. Every time i change my answer, the bean value #{bean.answer} is updated, form is rerendered and additional fields appear/disappear.

The problem:

I want to change poplist (selectOneMenu) to radio butons (selectOneRadio).
So in my new code I simply changed h:selectOneMenu to h:selectOneRadio:

<h:form id="form">
    ...

    <h:selectOneRadio id="question"
                     value="#{bean.answer}" 
                     required="true">
        <f:selectItem itemLabel="No"  itemValue="false" />
        <f:selectItem itemLabel="Yes" itemValue="true" />
        <a4j:support event="onchange"
                     ajaxSingle="false"
                     immediate="true"
                     reRender="form">
            <a4j:actionparam name="question" 
                             value="$('form:question').value" 
                             assignTo="#{bean.answer}" 
                             noEscape="true"/>
            </a4j:support>
    </h:selectOneRadio>

...

    <h:outputText value="Additional field" 
                  styleClass="boldedFont" 
                  rendered="#{bean.answer}"/>
    <h:inputText  id="fieldId"
                  value="#{bean.additionalFieldValue}"
                  required="true"
                  rendered="#{bean.answer}"/>
...

</h:form>

But this code doesn`t work. Every time i change my answer, the bean value #{bean.answer} is updated with the same “false” value and additional fields never appear.

Is there any simple way to achieve the same behaviour with h:selectOneRadio as with h:selectOneMenu?

Thanks

Answer 1

The onchange event is the wrong event to listen on a change within a group of radio buttons or check boxes. They exist basically of multiple input elements instead of only one. You need onclick instead.