0

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.

2
  • Where is getAccount being called from?
    – BarCotter
    Feb 9, 2015 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.
    – Berg
    Feb 9, 2015 at 17:25

1 Answer 1

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/

2
  • I tried this approach; however, it does not work. I get the same error.
    – Berg
    Feb 9, 2015 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, 2015 at 18:48

You must log in to answer this question.

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