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.

Posted

in

,

by


Related Posts

Comments

3 responses to “Get DOM ElementID of the Visualforce components”

  1. […] of “j_id0:j_id3:j_id4:c_txt“. In previous post we have already discussed about getting the elementId in Visualforce. When i tried to find the element in JQuery like $(‘#j_id0:j_id3:j_id4:c_txt’), i was […]

  2. k mahesh Avatar
    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………

  3. Euclides Avatar
    Euclides

    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 Reply

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

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading