JSF 2.0 – Images, CSS and Java Script

July 2, 2010

Working with JSF hidden fields from JavaScript

The idea of putting together JSF hidden fields and JavaScript comes from a simple
question—how to use JavaScript and JSF to submit a form from a control event? In other words
you will see how to submit a form immediately after a checkbox is checked or unchecked (it is
simple to imagine how to apply this solution for other components such as radio buttons).

Getting ready

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.

How to do it…

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?facesredirect=

			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.

How it 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.

There’s more…

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.