Get DOM ElementID of the Visualforce components

This article will focus on getting generated dom element Id in Visualforce.
Let’s consider below code snap:

<apex:page>
<apex:form id="frm">
Enter Value 1 :
<apex:inputText id="txt1" />
</apex:form>
</apex:page>

If you want to get the id of “apex:inputText” in javascript like belowCode

Var fld =  document.getElementById("˜txt1');

It will NOT work.
Because its actual id will be something like “j_id0:frm:txt1“.

To get the Actual id in Visualforce page we have to use below line of code:

Var fld =  document.getElementById("{!$Component.txt1}");

As you can see, we have to use below Syntax:

{!$Component.fieldId}

Case 1:
However there is one catch. If the element is present at several levels where Parents also have the Id then you have to write code like:

{!$Component.Parent1.Parent2.fieldId}

Case 2:
If your element is within form tag having no Id like :

<apex:page>
<apex:form>
Enter Value 1 :
<apex:inputText id="txt1" />
</apex:form>
</apex:page>

And you try to get the id like

Var fld =  document.getElementById("{!$Component.txt1}");

It will NOT work.
You must have to give the Id to “apex:form“ element and access it.

Example Working code:

<apex:page>
<apex:form id="frm">
Enter Value 1 :
<apex:inputText id="txt1" />
</apex:form>
</apex:page>

Get Id by using code:

Var fld =  document.getElementById("{!$Component.frm.txt1}");

You might face problem in JQuery because of auto generated ID pattern of Salesforce, in that case this article “Handling Colon in Element ID in JQuery – Visualforce problem” will come handy.

3 comments

  1. Hi Jitendra.

    Actually i created fields using metadata api but created
    fileds Field-Level Security for Profile(Administrator) place visible and
    editable checkboxes not checked(any profile not checked i am a
    administrator).Every time i will goto
    Setup->Manage->users>administrator->custom field level
    security->related object name and click view and checked to metadata
    created fields visible and editable.How to check this visible and
    editable checkboxes Using apex DML permissionsets dynamically through
    Coding?.

    please help me………

  2. Good.
    And the reverse?
    I put a value in a component and this fires “onchange” event in a Visual Force Page Controller Class???
    I tested and not function….
    How to make this? Some idea???
    Thank you.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.