Visualforce basic JavaScript examples.?

Visualforce basic JavaScript examples.?

Example 1: 

In this example i am simply telling that how you can reference your VF variables in javascript.

Here in the first text once you entered the values and come's out from the text it will show alert message and displaying the text values in alert message.

<apex:page id="pg">

    <apex:form id="fm">

      <apex:inputtext id="Name" onchange="Show()"/>

      <script>

        function Show(){

          alert('test');

          var myname = document.getElementById('{!$Component.Name}').value;

          alert("my Name is==>"+ myname );

          

        }

        

        function demo(){

          alert('demo is calling');

          var myage = document.getElementById('pg:fm:pb2:age').value;

           alert('My age is==>'+myage );

        }

      </script>

      <br/>

      <br/>

      

      <apex:pageblock id="pb2">

      

      <apex:inputtext id="age" onchange="demo()"/>

      </apex:pageblock>

      

    </apex:form> 

 </apex:page>

Example 2:

In the below example i am populating first text field value into second text field. for that i am using simple javavascrpt functions.

<apex:page id="pg">

    <apex:form id="fm">

      <apex:inputtext id="Name" onchange="Show()"/>

      <script>

        function Show(){

          alert('test');

          var myname = document.getElementById('{!$Component.Name}').value;

          alert("my Name is==>"+ myname );

          

        }

        

        function demo(){

          alert('demo is calling');

          var myage = document.getElementById('pg:fm:pb2:age').value;

           alert('My age is==>'+myage );

        }

      </script>

      <br/>

      <br/>

      

      <apex:pageblock id="pb2">

      

      <apex:inputtext id="age" onchange="demo()"/>

      </apex:pageblock>

      

    </apex:form> 

 </apex:page>

That's it. these are the simple javascript basic examples.