2 Replies Latest reply on Feb 13, 2009 8:02 PM by Thomas Marcon

    Retrieve component input value from javascript

    Thomas Marcon Newbie


      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"/>
      <rich:calendar id="calCloseDate" immediate="true" value="#{eventCreation.currentEvent.closeDate}" required="true">
       <f:validator validatorId="closeDateValidator" />
       <rich:ajaxValidator event="onchanged" oncomplete="step1CheckCloseDate();" />

      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 != '') {

      if (document.getElementById('parameter_eventName').value != '') {

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


      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 :)

        • 1. Re: Retrieve component input value from javascript
          Nick Belaevski Master


          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:

          • 2. Re: Retrieve component input value from javascript
            Thomas Marcon Newbie

            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 != '') {


            And it works great ;)