Problem: Sometimes you will want to access a component from javascript with
getElementById, but id's are generated dynamically in JSF, so you
need a method of getting an objects id. I answer below on how you can do this.
Original Question:
I want to use some code like below. How can I reference the inputText JSF component in my Javascript?
<html xmlns=http://www.w3.org/1999/xhtml
xmlns:h=http://java.sun.com/jsf/html
xmlns:f=http://java.sun.com/jsf/core>
<head>
<title>Input Name Page</title>
<script type=javascript >
function myFunc() {
// how can I get the contents of the inputText component below
alert(Your email address is: + document.getElementById(emailAddress).value);
}
</script>
</head>
<h:body>
<f:view>
<h:form>
Please enter your email address:<br/>
<h:inputText id=emailAddresses value=#{emailAddresses.emailAddressesStr}/>
<h:commandButton onclick=myFunc() action=results value=Next/>
</h:form>
</f:view>
</h:body>
</html>
Update: this post Client Identifiers in JSF2.0 discusses using a technique like:
<script type=javascript >
function myFunc() {
alert(Your email address is: + document.getElementById(#{myInptTxtId.clientId}).value);
}
</script>
<h:inputText id=myInptTxtId value=backingBean.emailAddress/>
<h:commandButton onclick=myFunc() action=results value=Next/>
Suggesting that the attribute id on the inputText component
creates an object that can be accessed with EL using #{myInptTxtId},
in the above example. The article goes on to state that JSF 2.0 adds
the zero-argument getClientId() method to the UIComponent class.
Thereby allowing the #{myInptTxtId.clientId} construct suggested
above to get the actual generated id of the component.
Though in my tests this doesn't work. Can anyone else confirm/deny.
The answers suggested below suffer from drawback that the above
technique doesn't. So it would be good to know if the above technique
actually works.
