Sunday, April 3, 2016

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.



5 comments:

aditi said...

I cannot see example 2 here .its seems same example 1 copy and pasted as 2.Please add the second example if possible

aditi said...

I cannot see example 2 here .its seems same example 1 copy and pasted as 2.Please add the second example if possible

dinesh said...

in second example you said first text field value will be populated to second one right.but the code you have given works like first example there is no change,then how it will populate i didn't understand

dinesh said...

in second example you said first text field value will be populated to second one right.but the code you have given works like first example there is no change,then how it will populate i didn't understand

Annappa Ph said...

nice post ..but here you arent populating first input value into second inputfield...

Post a Comment

 
| ,