Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

I am using Javascript to get the value of an account lookup field contained in a visualforce page component. In the console, the value of my Javascript variable is Null. Please advise on the correct way to retrieve the value of an apex inputfield from an embedded Visualforce component using Javascript.

The error I am receiving is "Uncaught TypeError: Cannot read property 'value' of null"

Visualforce Page*******************************

<apex:page>
    <script>
      function getAccount() {
        var account = document.getElementById('acc').value;
        console.log('***** This is the value of account ' + account);
      }
    </script>

    <div id="entryfrm" title="Add">
      <c:EntryForm />
    </div>
</apex:page>

Visualforce Component*************************

<apex:component controller="STRCont" id="comp1">

  <apex:form id="frm">
        <apex:outputPanel layout="block"  id="entrypanel" >
        <apex:pageblock id="Saveblock">
            <apex:pageblocksection title="Prepared For" id="pbsectn">
                <apex:inputfield value="{!q.account__c}" id="acc"/>
                <apex:inputfield value="{!q.Contact__c}" id="con"/>
            </apex:pageblocksection>

            <apex:pageblocksection title="Additional Info" id="rsectn">
                <apex:inputfield value="{!q.Status__c}" id="status"/>
                <apex:inputfield value="{!q.Exp__c}" id="exp"/>
                <apex:inputfield value="{!q.Lh__c}" id="lh" />
                <apex:inputfield value="{!q.num_Picks__c}" id="picks" />
                <apex:inputfield value="{!q.Description__c}" id="desc"/>
           </apex:pageblocksection> 
        </apex:pageblock>
        </apex:outputpanel>
  </apex:form>
</apex:component>

Console Log****************************************

Uncaught TypeError: Cannot read property 'value' of null

UPDATE***************

When I put the inputfield in my main Visualforce page, it works using the component tree but if the field is in the included Visualforce component, it does not. My console is displaying the following:

var accounttest = document.getElementById('page:frm:accountvar').value;

This is when my Javascript function references a test field in my main page.

var account = document.getElementById('').value;

This is when my Javascript function references the same field in my component. I have the component tree in there.

share|improve this question
    
Where is getAccount being called from? –  BarCotter Feb 9 at 16:54
    
getAccount is being called from a jquery modal window function. Once the user selects an account from the account lookup and clicks "Save", getAccount is called. –  SFDC NOOB Feb 9 at 17:25

1 Answer 1

You should be able to get the value of the account field by the following, Typically I like to give my form an id as well so if you were to go

<apex:form id="form1">

The following javascript is what you would want to use to get the

document.getElementById('{!$Component.form1.Saveblock.pbsectn.pbs1.acc}').value

for more information look at the section: Using $Component to Reference Components from JavaScript in the developer guide.

http://www.salesforce.com/us/developer/docs/pages/

share|improve this answer
    
I tried this approach; however, it does not work. I get the same error. –  SFDC NOOB Feb 9 at 18:37
    
Could you post your visualforce component's rendered HTML that is on the page that you are trying to use the javascript function? –  TC Sutton Feb 9 at 18:48

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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