Apex inputfield value using Javascript

Question

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.

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/