Get DOM ElementID of the Visualforce components

Author posted by Jitendra on Posted on under category Categories Salesforce, Visualforce and tagged as Tags with 2 Comments on Get DOM ElementID of the Visualforce components

How to get the DOM ElementID of the Visualforce components in Salesforce

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.

Related posts

  • Pingback: Handling Colon in Element ID in JQuery - Visualforce problem - Salesforce | Shiva Blog()

  • k mahesh

    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………