Issue with getting element using ElementId

Question

I am trying to get the apex input element value using document.getElementById() method but facing some issues with that. I got the element id by inspecting that element in chrome. The id which I got is "j_id0:j_id11:j_id40:j_id44:ListingName". When I am trying to use below method , I am getting null result :

document.getElementById("j_id0:j_id11:j_id40:j_id44:ListingName")

I have tried this also with a simple code as below but still it is showing "null" in alert message :

<apex:page standardController="Account">
  <apex:form >
      <apex:inputField value="{!Account.name}" id="accName"/>
      <apex:commandButton value="Test" onclick="testFunction(); return false;"/>
  </apex:form>
  <script>
  function testFunction(){
      alert(document.getElementById('{!$Component.accName}'));
  }
  </script>
</apex:page>

Can anyone suggest what I am missing or doing wrong ?

Answer 1

It should work perfectly fine. Please check back your "html id" twice. If it helps, I have given here what I tried.

Here is what I tried.

<apex:commandButton action="{!edit}" id="edit" value="Edit" onmouseover="myalert();"/>

function myalert(){
       alert(document.getElementById("j_id0:j_id1:j_id8:j_id9:0:accountName"));
}

Update:

Try your code with ids assigned to all the levels to have proper control.

<apex:page standardController="Account" id="accPage">
  <apex:form id="accform" >
      <apex:inputField value="{!Account.name}" id="accName"/>
      <apex:commandButton value="Test" onclick="testFunction(); return false;"/>
  </apex:form>
  <script>
  function testFunction(){
      alert(document.getElementById('{!$Component.accPage.accform.accName}'));
  }
  </script>
</apex:page>

Answer 2

You need to use the VisualForce $Component function to grab the proper name. Try this

document.getElementById('{!$Component.ListingName}')

You can also chain the $Component string if you have other named elements in the DOM.

Here is the documentation on $Component: http://www.salesforce.com/us/developer/docs/pages/Content/pages_variables_global_component.htm