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.