1

I am trying to get the value of a text field in a VF page in Java Script. Below is my VF page.

<apex:page id="thepage" standardController="Opportunity" extensions="OpportunityExt">  
 <apex:form id="theform"> 


        <script type="text/javascript">
        function initialize(){ 
        alert('called' + document.getElementById("thePage:theform:atextId").value);
        }
        </script> 

          <apex:outputPanel id="inputId">
          <apex:commandLink id="saveBtn" onclick="initialize();" value="Search"/>
          </apex:outputPanel>
          <apex:outputPanel id="outputId">
             <apex:outputLabel value="{!$objecttype.Opportunity.fields.IsClosed__c.label}"/> 
             <apex:actionRegion >
               <apex:inputField value="{!Opportunity.IsClosed__c}" id="closedcheckboxId"/> 
             </apex:actionRegion> 
             <apex:outputLabel value="{!$objecttype.Opportunity.fields.OrderNumber__c.label}"/> 
             <apex:actionRegion >
               <apex:inputField value="{!Opportunity.OrderNumber__c}" id="atextId"/> 
             </apex:actionRegion>                          
          </apex:outputPanel>
  </apex:form> 


</apex:page>

When I click the link I get this error in the inspect window.

Cannot read property 'value' of null

I might be missing something here. I checked the path of the text field using inspect window and I saw:

<input id="thepage:theform:atextId" maxlength="8" name="thepage:theform:atextId" size="20" type="text" value="731645">

What am I missing here. Why do I get a null?

  • @AdrianLarson you got this one? – sfdcfox Sep 26 '17 at 23:08
  • Wasn't planning on it. – Adrian Larson Sep 26 '17 at 23:10
6

In this case, it was a simple typo: the ID value is cAsE-sEnSiTiVe.

    alert('called' + document.getElementById("thepage:theform:atextId").value);
                                       //        ^ This P was capitalized

Always make sure you're matching the case for your Id values.

As a more practical solution, consider using $Component:

    alert('called' + document.getElementById("{!$Component.thePage.theform.atextId}").value);

Using $Component will resolve the element Id correctly (in a case-insensitive manner) so you don't have to worry about it as much.

  • Gotcha! Appreciate it. – SfdcBat Sep 26 '17 at 23:24

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.