Populating Values Using JavaScript In Visualforce Page

Share on facebook
Share on twitter
Share on linkedin
We need to populate values in a website from "Present Address" section to "Permanent Address" when the checkbox "Check, If Permanent Address Same as Present Address" is enabled.

We need to populate values in a website from “Present Address” section to “Permanent Address” when the checkbox “Check, If Permanent Address Same as Present Address” is enabled. Once the values are populated, the Permanent Address section’s fields should not be editable. We have done this with the help of Salesforce Visualforce pages using JavaScript.

There are two fields Country and State available in both Permanent Address and Present Address section. State field should be a drop down, if the country value is United States. If we select the country value as “United States”, then we have to display only dependent State picklist values. Otherwise, the State Textbox is visible for the State.

So, this can be achieved by using JavaScript functionality inside the Visualforce pages.

Example
We have to build Visualforce page design, using Present Address and Permanent Address fields.

First, we have to fill in all the Present Address details, and if it is same as Permanent Address details, then click the Checkbox (check, “If Permanent Address is same as Present Address” checkbox). So that above fields are automatically populated in Permanent Address section.

After that, the Permanent Address field values are not editable, because it is same as Present Address values.

Another Scenario is, if we select country picklist value as “United States”, it will display dependent State picklist values. If country is other than United States, it will display State Textbox field, where we can enter the State value.

Below is the Visualforce Page design

pop1909-1.png

Visualforce Page Coding

<apex:page standardController="Application__c" extensions="applicationformcontrol" id="pg1" sidebar="false">
<apex:form id="frm1">
<!—- To enable or disable the checkbox -->
<apex:inputField id="check" value="{!app.Checksamepresent__c}" onchange=" return check();"/> 
</apex:form>
<!-- Javasript functionality-->
<script>
<!-- To display or hide the output panel based on the country selection for dependent country picklist or textbox -->
function check()
{
var con=document. getElementById("{!$Component.pg1. frm1.pbk.pbs1.precon}").
value;var conp=document. getElementById("{!$Component.pg1. frm1.pbk.pbs2.percon}").
value;if(document. getElementById("{!$Component.pg1. frm1.pbk.pbs2.check}"). checked==true)
{
if(con=="United States")
{
document.getElementById("{!$Component.pg1. frm1.pbk.pbs2.p3}"). style.display = 'none';
document.getElementById("{!$Component.pg1. frm1.pbk.pbs2.p4}"). style.display = 'block';
else
{
document.getElementById("{!$Component.pg1. frm1.pbk.pbs2.p3}"). style.display = 'none';
document.getElementById("{!$Component.pg1. frm1.pbk.pbs2.p4}"). style.display = 'block';
}
document.getElementById("{!$Component. pg1.frm1.pbk.pbs2. peradd1}"). value=document. getElementById("{!$Component.pg1. frm1.pbk.pbs1.preadd1}"). value;
<!-- Same as Present Address, Permanent Address fields are read only -->
document.getElementById("{!$Component. pg1.frm1.pbk.pbs2. peradd1}").readOnly=true;
}
else
{
document.getElementById("{!$Component. pg1.frm1.pbk.pbs2.p3}"). style.display = 'none';
document.getElementById("{!$Component. pg1.frm1.pbk.pbs2.p4}"). style.display = 'block';
document.getElementById("{!$Component. pg1.frm1.pbk.pbs2. peradd1}").value='';
document.getElementById("{!$Component. pg1.frm1.pbk.pbs2. peradd1}").readOnly=false;
}
}
<!-- To display or hide, dependent picklist or text box field based on country selection -->
function change()
{
var country=document.getElementById("{!$Component. pg1.frm1.pbk.pbs1. precon}").value;
if(country=='United States')
{
document.getElementById("{!$Component. pg1.frm1.pbk.pbs1.p1}"). style.display = 'block';
document.getElementById("{!$Component. pg1.frm1.pbk.pbs1.p2}"). style.display = 'none';

}
else
{
document.getElementById("{!$Component. pg1.frm1.pbk.pbs1.p1}"). style.display = 'none';
document.getElementById("{!$Component. pg1.frm1.pbk.pbs1.p2}"). style.display = 'block';
}
}
function change1()
{
var country=document.getElementById("{!$Component. pg1.frm1.pbk.pbs2. percon}").value;
if(country=='United States')
{
document.getElementById("{!$Component. pg1.frm1.pbk.pbs2.p3}"). style.display = 'block';
document.getElementById("{!$Component. pg1.frm1.pbk.pbs2.p4}"). style.display = 'none';
}
else
{
document.getElementById("{!$Component. pg1.frm1.pbk.pbs2.p3}"). style.display = 'none';
document.getElementById("{!$Component. pg1.frm1.pbk.pbs2.p4}"). style.display = 'block';
}
}
</script>
</apex:page>

Reference Links
Using $Component to Reference Components from JavaScript | Apex:selectCheckboxes | HTML DOM Style display Property | HTML DOM Input Text readOnly Property

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

How to improve the performance of Visualforce Page

Whenever possible, try to use the declarative or standard feature such as Approval Processes, Visual Flows, and Workflows because these components are already fully optimized by the Force.com; therefore, it won’t count against most of the governor limits but in some cases business may need complex logic; then we can go for the programmatic features.

Read Article »

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.