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 '17 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 '17 at 12:46

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');"/>
| improve this answer | |
  • 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 '17 at 12:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.