Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
var ele=document.getElementById('{!$Component.product_form.product_pageblock.product_section2.Search_Keyword}');
    alert('Ele = ' + ele);


<apex:form id="product_form" >
  <apex:pageBlock id="product_pageblock">  
    <apex:pageBlockSection columns="3" id="product_section2">  
    <apex:pageBlockSectionItem id="sectionitem2">
      <apex:outputLabel value="Search Keyword"/>
      <apex:inputText value="{!SearchKeyword}" id="Search_Keyword"/> 

I want to check the size of searchKeyword entered? But the alert is returning null.What might be the problem?

share|improve this question
It would help if you had the Visualforce code posted so that we could compare your {!$Component} selector to the page structure. – Peter Knolle Dec 26 '12 at 12:13
up vote 2 down vote accepted

View the HTML source generated by your web browser to see if the generated id for the DOM Element is what you expect it to be for the component which you are attempting to access.

Look at the Salesforce documentation Best Practices for Accessing Component IDs. That explains, with examples, how the {!$Component} notation is translated to an HTML id, with colons (:) separating the various sections in the hierarchy. It is possible that you are missing a part of the hierarchy or are accessing something inside of an iteration tag and need the iteration notation to access it.

I have found that it can be easier to assign something a class/styleClass and then use jQuery to select it by that. For example:

<script type="text/javascript" src="//"> </script>
<script type="text/javascript">
     var $j = jQuery.noConflict();
     $j(document).ready(function() {
         var searchKeyWord = $j('.Search_Keyword_Class');

<apex:inputText value="{!searchKeyword}" styleClass="Search_Keyword_Class" />
share|improve this answer
fixed the issue using the page source and the component Ids – Keepcalmncode Dec 26 '12 at 14:33

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.