Way To Access Component Using JQuery In Visualforce Page

In this post, I will show you a simple way to access Visualforce components using jQuery. In the below example I’m accessing the ‘inputText’ component using jQuery and toggling it on ready method.

The ready() method is an inbuilt method in jQuery which helps to load the whole page then execute the rest code. This method specify the function to execute when the DOM is fully loaded.

This method accepts single parameter function which is mandatory. It is used to specify the function to run after the document is loaded.

Visualforce Page:

<apex:page id="page" >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"/>
<script type="text/javascript"> 
      $(document).ready(function() {
            $("[id$=inputText]").toggle();
     }); 
</script>
<apex:form id="form" >
       <apex:pageBlock id="pB"> 
             <apex:inputText id="inputText" label="Input" />
       </apex:pageBlock> 
 </apex:form>    
</apex:page>