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.

  • Where is getAccount being called from? – BarCotter Feb 9 '15 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 '15 at 17:25
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/

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

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.