Reputation: 1739
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
Upvotes: 0
Views: 4584
Reputation: 1108742
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.
Upvotes: 3