We have developed this recipe with NetBeans 6.8, JSF 2.0, and GlassFish v3. The JSF 2.0 classes were obtained from the NetBeans JSF 2.0 bundled library.

The solution is pretty simple, but the idea it self is ingenious and involves JavaScript and JSF command links. First we write a simple JSF form (this form will be submitted when the checkbox is checked / unchecked):

<h:form id="myForm">
<h:selectBooleanCheckbox id="checkbox"
value="#{participateBean.participate}" title="Click it to select or
deselect" onclick="submitForm('myForm:hiddenCommandLink'),"/>
<h:outputText value="Want to participate?"/>
</h:form>

As you can see, when the onclick event is fired (the checkbox is checked or unchecked) the submitForm JavaScript function is called. This function receives one argument, representing the id of a simple JSF h:commandLink component. This component contains the form's action (a redirection to another page) and a simple CSS style for being invisible. Putting this command link in the form will look like the following:

<h:form id="myForm">
<h:selectBooleanCheckbox id="checkbox"
value="#{participateBean.participate}" title="Click it to select or
deselect" onclick="submitForm('myForm:hiddenCommandLink'),"/>
<h:outputText value="Want to participate?"/>
<h:commandLink id="hiddenCommandLink"
style="display:none;visibility:hidden;" action="response?faces-
redirect=true"/>
</h:form>

Now, the submitForm function simulates a click event on our command link through pure JavaScript code:

function submitForm(commandLinkId) {
var fire = document.getElementById(commandLinkId);
if (document.createEvent) {
var eventObject = document.createEvent("MouseEvents");
eventObject.initEvent( "click", true, false );
fire.dispatchEvent(eventObject);
} else if (document.createEventObject); { fire.fireEvent("onclick"); }

We didn't say anything about the ParticipateBean, since is not relevant here, it is just for proving that the submission really works.

When users check/uncheck the form's checkbox, the onclick event is fired and the JS submitForm is called. The secret is that this function received the id of a command link—which is in the JSF form—and it is able to submit this form through its action attribute. This action is forced by JavaScript code by dispatching an artificial click event for the command link.

You can use this recipe for any other JSF component. For example, you may want to submit a form after a radio button is selected, or after a character is typed in a text field, or a combo-box item is selected and so on. The principle remains the same, except that you need to fire up the correct event (such as onclick or onchange), depending on the JSF component.

The code bundled with this book contains a complete example of this recipe. The project can be opened with NetBeans 6.8 and it is named: Working_with_JSF_hidden_fields_from_JavaScript.