How do Javascript refer to JSF IDs?

Question

Hi
I have a JSF page and want to launch a java script (calendar pick date popup) from it.
The java script pass in the HTML input ID (inputText0) of the input field to populate (result from date pick).
But, I do not know the HTML input ID since JSF generate an ID (_id2:inputText0).
Here is the JSF code:
<h:form>
<script type="text/javascript">
var calDFrom = new CalendarPopup("testdiv1");
calDFrom.showNavigationDropdowns();
</script>
<h:panelGrid columns="2">
<h:panelGroup>
<h:outputLabel id="outputLabel0" value="#{msg.repInFromDate}" for="inputText0" styleClass="fieldOutputHeaderLabel"/>
</h:panelGroup>
<h:panelGroup>
<h:inputText id="inputText0" value="#{sessionActionListener.depotSales.fromDate}" required="true">
<f:validator validatorId="dateValidator"/>
</h:inputText>
<h:graphicImage onklick="calDFrom.select(document.forms[0].inputText0,'anchorCalDFrom','yyyy-MM-dd'); return false;" title="calDFrom.select(document.forms[0].inputText0,'anchorCalDFrom','yyyy-MM-dd'); return false;" id="anchorCalDFrom" alt="jsf-sun" url="/images/calendar.gif" />
</h:panelGroup>
</h:panelGrid>
</h:form>
Here is an extract of the HTML rendederd by JSF:
<tr class="detailDataTableRow">
<td class="detailDataTableColumn"><label id="_id2:outputLabel0" for="_id2:inputText0" class="fieldOutputHeaderLabel">
From Date</label></td>
<td class="detailDataTableColumn"><input id="_id2:inputText0" type="text" name="_id2:inputText0" class="fieldInputDetailText" /><img id="_id2:anchorCalDFrom" src="/OrderSystem-ViewController-context-root/images/calendar.gif" alt="jsf-sun" onklick="calDFrom.select(document.forms[0].inputText0,'anchorCalDFrom','yyyy-MM-dd'); return false;" title="calDFrom.select(document.forms[0].inputText0,'anchorCalDFrom','yyyy-MM-dd'); return false;" /></td>
</tr>
How do I solve this problem?
Henkie

Answer 1

Assign an unique ID to the h:form and use document.getElementById() in JS. You can also make use of the 'this' reference in JS and then crawl through the parent form and/or the DOM tree.