Accessing html field values in JSF framework

Question

By default JSF renders the HTML field id name dynamically. ID name is generated randomly in the format formname:id_some_random_number.

Because of this i cannot use document.getElementById("").

Is there any solution for this problem?

Answer 1

You just need to specify the ID of the input. However, note that the ID will be prefixed by the ID of the form that contains the input field.

For example:

<h:form id="myForm">
    ...
    <h:inputText id="myInput" .../>

the real ID of the inputText is myForm:myInput.

Thus, this Javascript code will work:

var obj = document.getElementById("myForm:myInput");

---

Edit (for precision)

To be more precise, if a component implements the NamingContainer interface in Java, then all the nested components will have their ID prefixed by the ID of this component. This is the case for the <h:form/> component, but also for <h:datatable/>.

Answer 2

If all else fails, you can try giving the elements unique css classes and then accessing them via getElementsByClassName(). Or try browsing the childNodes() of an element with known id. Or you can add a node with known id inside your target element and then use .parentNode :)

Answer 3

You can get the generated ID by using UIComponent.getClientId (JSF 2, if you can use it, adds a no-arg version that makes this more useful with EL expressions). See this blog post for tips on working with JSF component identifiers (though note the caveats).