Retrieve component input value from javascript

[thomas.m]

Hello,

I want to test the value of a form field after validating another field.
Here is my source code :

<h:inputText id="parameter_eventName" value="#{eventCreation.currentEvent.name}" required="true" immediate="true">
 <f:validateLength minimum="3" />
 <rich:ajaxValidator event="onblur"/>
</h:inputText>
[...]
<rich:calendar id="calCloseDate" immediate="true" value="#{eventCreation.currentEvent.closeDate}" required="true">
 <f:validator validatorId="closeDateValidator" />
 <rich:ajaxValidator event="onchanged" oncomplete="step1CheckCloseDate();" />
</rich:calendar>

I call a javascript function when event "oncomplete" is fired from my component. This works very well, no problem. The problem is in my javascript function.

I want to test if the value of the "parameter_eventName" input field, and do something if it's not empty. My problem is that I can't get the input from javascript.

Here are some cases I tried :

if (document.getElementById('eventCreateForm:parameter_eventName').value != '') {
 alert('TEST');
}

if (document.getElementById('parameter_eventName').value != '') {
 alert('TEST');
}

Neither works. I then did some debug into generated HTML code, and find out the generated id from my component is ...

_jbpns_2fdefault_2fPrtnrEventPortlet_2fPrtnrEventPortletWindowsnpbj:_viewRoot:j_id17:eventCreateForm:j_id18:parameter_eventName

In addition I noticed that the id changes over time (and sessions), the part 'j_id18', and others can vary. So I can't put the big id hard-coded in my javascript...

What is that ? Why is my component id so long ? Could I use some javascript function in Richfaces that could get my component id from only the id I specified (like Richfaces.get.....) ? What is the point of putting component id if we can't reach them with getElementById ?

Please help me :)

[nbelaevski]

Hello,

Client-side identifier of HTML element representing JSF component is a string consisting of all parent component that are instances of NamingContainer (typical ones are h:form, f:subview, rich:tree, rich:dataTable, h:dataTable etc.) identifiers and component identifier joined by ':' char. E.g. if you have:

<h:panelGrid id="grid"><f:subview id="sv"><h:panelGroup id="group"><h:form id="_form"><h:inputText id="text">

then client id for inputText is sv:_form:text.

Ids starting from j_id are implicitly autogenerated ones.

There is a special function that you can use:

#{rich:clientId('text')}

[thomas.m]

Thanks a THOUSAND TIMES for this elegant, simple and WORKING solution!

I used something like this :

<rich:ajaxValidator event="onchanged" oncomplete="javascript:step1CheckCloseDate('#{rich:clientId('parameter_eventName')}');"/>

Quotes are not to be forgotten since the results of 'clientId' function is a string. And then the javascript :

function step1CheckCloseDate(name) {
if (document.getElementById(name) != null &&
document.getElementById(name).value != '') {

alert('TEST');
}
}

And it works great ;)