3

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")

enter image description here

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 ?

5

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"));
}

enter image description here

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>
3
  • I have tried below code , but still the alert is showing null : <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> – S.Sharma Feb 5 '14 at 4:46
  • See my updated answer. – BOSS_Force Feb 5 '14 at 5:56
  • This isn't an ideal solution. That path is subject to change based on the visualforce rendering engine. See supporting best practice document here: salesforce.com/us/developer/docs/pages/Content/… – drakored Feb 5 '14 at 18:45
3

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

6
  • The {!$Component.ListingName} markup won't work directly in the browser console as the initial question's image describes is being done. That said, this is the appropriate mechanism to get a dynamically generated element's ID within a VF page itself. – Mark Pond Feb 4 '14 at 20:37
  • @MarkPond Excellent point, this won't work for debugging in the chrome console, as it happens when the VF is rendered. In the console you can find elements with the built in $$ function and the ends with selector. $$('[id$="ListingName"]') – drakored Feb 4 '14 at 20:43
  • 2
    Thanks for teaching me something new! I was unaware that in most modern browser consoles $$ is a shortcut to document.querySelectorAll(). Very cool, I love this community. stackoverflow.com/a/10308917/1947121 – Mark Pond Feb 4 '14 at 22:18
  • Laziness for the win! Shortcuts are great. – drakored Feb 4 '14 at 22:22
  • @Mark Pond Can you please provide solution to my problem ? – S.Sharma Feb 5 '14 at 4:38

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.