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
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
