+ Start a Discussion
Mike Schumacher 2Mike Schumacher 2 

Javascript window.onload cannot get $component Id from visualforce page

I created a VF page with javascript to set a date field as disabled when a checkbox is unchecked.  I then wanted to function to also execute onload so the date field would be disabled if the checkbox was unchecked or enabled when the checkbox was checked.  

I noticed in the window.onload event accessing $component.xxx returned null.  If I move a field outside the apex:form tags, I can get the $component.xxx ID as expected.

I am able to pass the VF $component.id to the javascript routine but how do I get the form field ID during the onload event?  I must be missing something basic at this point.  Any assistance is appreciated.

*** Here is the VF code. ***

<apex:page standardController="OpportunityLineItem" showHeader="true" sidebar="true">
    <apex:form id="myForm" >

        <script type="text/javascript">
            function ToggleInput(theId,overrideId)
            {
                var e = document.getElementById(theId);
                var a = document.getElementById(overrideId).checked;
               
                if(e != null)
                {
                    if(a === true)
                    {
                    e.disabled = false;
                    } else
                    {
                    //e.disabled = (e.disabled ? false : "disabled");
                    e.disabled = true;
                    }
                }
            }
           
            //window.onload = function () {document.getElementById('{!$Component.liItemShipDate}').disabled= "disabled"; }
            window.onload = function()
            {
                alert(document.getElementById('{!$Component.liItemShipDate}'));
            }
 
        </script>

        <apex:sectionHeader id="pgSection" title="Opportunity Product Edit" subtitle="{!OpportunityLineItem.Name}" />
        <apex:pageBlock id="pgBlock" mode="edit" title="Opportunity Product Edit">

            <apex:pageBlockButtons location="both">
                <apex:commandButton value="Save" action="{!Save}"/>
                <apex:commandButton value="Cancel" action="{!Cancel}"/>
            </apex:pageBlockButtons>
        <apex:pageBlockSection id="pgBlockSectionAcctInfo" title="" collapsible="false" columns="2" >
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Opportunity</apex:outputLabel>
                <apex:outputField id="actOwner" value="{!OpportunityLineItem.OpportunityId}" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Machine #</apex:outputLabel>
                <apex:inputField id="actRating" value="{!OpportunityLineItem.Machine__c}" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Product</apex:outputLabel>
                <apex:outputField id="actOwner" value="{!OpportunityLineItem.Product2Id}" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Quantity</apex:outputLabel>
                <apex:inputField id="actRating" value="{!OpportunityLineItem.Quantity}" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Product Family</apex:outputLabel>
                <apex:inputField id="actOwner" value="{!OpportunityLineItem.Product_Family__c}" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Sales Price</apex:outputLabel>
                <apex:inputField id="actRating" value="{!OpportunityLineItem.UnitPrice}" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Product Type</apex:outputLabel>
                <apex:outputField id="actOwner" value="{!OpportunityLineItem.Product_TypeTEXT__c}" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Discount Percentage</apex:outputLabel>
                <apex:inputField id="actRating" value="{!OpportunityLineItem.Discount}" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem >
                <apex:outputLabel >List Price</apex:outputLabel>
                <apex:outputField id="actOwner" value="{!OpportunityLineItem.ListPrice}" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Total Price</apex:outputLabel>
                <apex:outputField id="actRating" value="{!OpportunityLineItem.TotalPrice}" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Serial Number</apex:outputLabel>
                <apex:inputField id="actOwner" value="{!OpportunityLineItem.Serial_Number__c}" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Asset</apex:outputLabel>
                <apex:inputField id="actOwner" value="{!OpportunityLineItem.Asset__c}" />
            </apex:pageBlockSectionItem>

        <!--
        <apex:inputCheckbox onclick="ToggleInput('{!$Component.textInput}');" value="{!OpportunityLineItem.Override_Opp_Ship_Date__c}"/>
        <apex:inputField id="textInput" value="{!OpportunityLineItem.Ship_Date__c}"/>
        -->
       
                <apex:inputCheckbox id="liItemOverride" onclick="ToggleInput('{!$Component.liItemShipDate}','{!$Component.liItemOverride}');" value="{!OpportunityLineItem.Override_Opp_Ship_Date__c}" />
                <apex:inputField id="liItemShipDate" value="{!OpportunityLineItem.Ship_Date__c}" />
       
          
        </apex:pageBlockSection>
          
        <apex:pageBlockSection id="pgBlockSectionAdditionalInformation" title="Description" collapsible="false" columns="2">
            <!--ANY CUSTOM FIELDS / ADDITIONAL INFORMATION CAN GO HERE-->
            <apex:pageBlockSectionItem >
                <apex:outputLabel >Line Description</apex:outputLabel>
                <apex:inputField id="actRating" value="{!OpportunityLineItem.Description}" />
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
    </apex:form> 
</apex:page>
 
Best Answer chosen by Mike Schumacher 2
Vivek DeshmaneVivek Deshmane
Hi,

Try this and let me know.
document.getElementById('{!$Component.myForm.pgBlock.pgBlockSectionAcctInfo.liItemShipDate}')

Best Regards,
-Vivek

All Answers

Vivek DeshmaneVivek Deshmane
Hi,
Try below code and let me know if it works.
document.getElementById('{!$Component.myForm.iItemShipDate}'))

Best Regards,
-Vivek
Vivek DeshmaneVivek Deshmane
Hi,

Try this and let me know.
document.getElementById('{!$Component.myForm.pgBlock.pgBlockSectionAcctInfo.liItemShipDate}')

Best Regards,
-Vivek
This was selected as the best answer
Mike Schumacher 2Mike Schumacher 2
Thanks Vivek.  The second reply resolved the issue.  I had tried the myForm previously but missed the pgBlockSectionAcctInfo.  Thanks for the quick reply.

-Mike