I've got a datepicker attached to an input text, and I need to make the text value available to my apex variable "LaunchDate." It's not binding. I even tried putting onfocus="SetLaunchD()" in the commandlink, without luck.

Further inspection reveals the Javascript isn't getting the value of the input text id="datepicker" -- an alert I put in there to dubug shows ddate is undefined. Am I missing something?

Sub-question: I use a commandlink to post the form. Method InsertNewData flags any blank fields by setting a boolean for an applicable output panel. So, for example, someone forgot to enter a Launch Date, the error panel will be rendered. This works fine with rerender="" or none at all, but when using rerender="LaunchDateError" the panel doesn't become visible, consequently needing to reload the whole form in order to see any form validation errors. What's up? I need to save my launch date variable definitely, and secondarily a more fluid response would be nice.

Any Suggestions?


<apex:outputpanel id="LaunchDateError" styleclass="RedError" rendered="{!ShowLaunchDateRequired}"> 
Launch Date is Required.</apex:outputpanel>

<apex:inputHidden value="{!LaunchDate}" id="myHiddenVar" />

<input type="Text" id="datepicker"  value="{!LaunchDate}" onblur="SetLaunchD()"/>

<apex:commandLink styleClass="SubmitButton" action="{!InsertNewData}" 
<!--  "Mainform, Pro1Error, ProductError, ClientError, LaunchDateError"> -->
Submit New Client </apex:commandLink>


function SetLaunchD() {
   var ddate = document.getElementById('datepicker').Value;
  • Most probably looks like your JavaScript is not able to fetch the correct Id of element using $Component function. Try getting the complete Id of element by adding the path of DOM elements, like mentioned in this example of the blog post.
    – Raul
    Aug 22, 2017 at 14:48
  • Thanks. That did it. Now I know to always use id's on apex page and apex form.. :-)
    – J.W.
    Aug 23, 2017 at 12:46

1 Answer 1


Accessing elements with $Component variable is sometimes tricky as it requires full path from the location where its accessed upto the element.

Prepared a visual diagram, might help in understanding clearly-

enter image description here

Here is an example to illustrate:

<apex:page id="page">

        // method to print the value
        function printElementId(elementId, location) {
            console.log('elementId is ' + elementId + 
                ' | clicked from ' + location + 
                ' | value is ' + document.getElementById(elementId).innerHTML);
    <apex:form id="form">
        <apex:pageBlock id="pb"> 
            <apex:pageBlockSection id="pbs">
                <apex:pageBlockSectionItem id="pbsi">
                    <apex:outputLabel value="User Name"/>
                    <apex:outputPanel onclick="printElementId('{!$Component.userName}', 'outputPanel');"
                        id="userName">Dummy Panel</apex:outputPanel>
                <apex:commandButton value="Inside PBS"
                    onclick="printElementId('{!$Component.pbsi:userName}', 'PBS button');"
            <apex:commandButton value="Inside PB"
                onclick="printElementId('{!$Component.pbs:pbsi:userName}', 'PB button');"
        <apex:commandButton value="Inside form"
            onclick="printElementId('{!$Component.form:pb:pbs:pbsi:userName}', 'form button');"
    <input value="Inside page" type="button"
        onclick="printElementId('{!$Component.page:form:pb:pbs:pbsi:userName}', 'page button');"/>
  • Thanks for your input and for your well prepared material. Much appreciated. Gosh, when I added my id's in the code and it worked, boy was I jumping for joy!
    – J.W.
    Aug 24, 2017 at 12:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .