How to access pageblock item in Javascript?

Question

<script>
var ele=document.getElementById('{!$Component.product_form.product_pageblock.product_section2.Search_Keyword}');
    alert('Ele = ' + ele);

</script>

<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"/> 
    </apex:pageBlockSectionItem>

---

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

Answer 1

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="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
<script type="text/javascript">
     var $j = jQuery.noConflict();
     $j(document).ready(function() {
         var searchKeyWord = $j('.Search_Keyword_Class');
         alert(searchKeyword);
     });
</script>

<apex:inputText value="{!searchKeyword}" styleClass="Search_Keyword_Class" />