Hi Guys, here we have shown how to make shipping address same as billing address upon click on checkbox.
Apex Controller
public class AddressFieldsInsert {
@AuraEnabled
public static void accountinsert(Account acc){
insert acc;
}
}
Component : AutoFillAddress
<aura:component controller="AddressFieldsInsert" implements="lightning:isUrlAddressable,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="NewAccount" type="Account[]" default="{'sobjectType' : 'Account'}"/>
<aura:attribute name="CheckboxValue" type="Boolean" default="false"/>
<div class="slds-align--absolute-center">
<lightning:input label="Account Name" name="Name" value="{!v.NewAccount.Name}"/>
</div>
<lightning:layout horizontalAlign="space">
<lightning:layoutItem >
<div>
<h3 class="slds-section__title slds-theme_shade slds-size--8-of-12">
<span class="slds-truncate slds-p-horizontal_small" title="Section Title">Billing Address</span>
</h3>
<br/>
<div class="slds-size--8-of-12">
<lightning:input label="Billing Street " name="BillingStreet" value="{!v.NewAccount.BillingStreet}"/>
<br/>
<lightning:input label="Billing City" name="BillingCity" value="{!v.NewAccount.BillingCity}"/>
<br/>
<lightning:input label="Billing State" name="BillingState" value="{!v.NewAccount.BillingState}"/>
<br/>
<lightning:input label="Billing Country" name="BillingCountry" value="{!v.NewAccount.BillingCountry}"/>
<br/>
<lightning:input label="Billing PostalCode" name="BillingPostalCode" value="{!v.NewAccount.BillingPostalCode}"/>
<br/>
<lightning:input type="checkbox" aura:id="checkBoxId" label="Is Shipping address same as Billing address" name="checkbox" onchange="{!c.onClickCheckBox}"/>
<br/>
</div>
</div>
</lightning:layoutItem>
<lightning:layoutItem >
<div>
<h3 class="slds-section__title slds-theme_shade slds-size--12-of-12">
<span class="slds-truncate slds-p-horizontal_small" title="Section Title">Shipping Address</span>
</h3>
<br/>
<div class="slds-size--12-of-12">
<lightning:input label="Shipping Street " name="ShippingStreet" value="{!v.NewAccount.ShippingStreet}"/>
<br/>
<lightning:input label="Shipping City" name="ShippingCity" value="{!v.NewAccount.ShippingCity}"/>
<br/>
<lightning:input label="Shipping State" name="ShippingState" value="{!v.NewAccount.ShippingState}"/>
<br/>
<lightning:input label="Shipping Country" name="ShippingCountry" value="{!v.NewAccount.ShippingCountry}"/>
<br/>
<lightning:input label="Shipping PostalCode" name="ShippingPostalCode" value="{!v.NewAccount.ShippingPostalCode}"/>
</div>
</div>
</lightning:layoutItem>
</lightning:layout>
<div class="slds-align--absolute-center">
<lightning:button label="Save" name="Save" variant="brand" onclick="{!c.SubmitFunction}"/>
</div>
</aura:component>
JS Controller
({
onClickCheckBox : function(component, event, helper) {
var checkBoxV = component.find("checkBoxId").get("v.checked");
component.set("v.CheckboxValue", checkBoxV);
var cb = component.get("v.CheckboxValue");
var streetStr=component.get("v.NewAccount.BillingStreet");
var cityStr=component.get("v.NewAccount.BillingCity");
var stateStr=component.get("v.NewAccount.BillingState");
var countryStr=component.get("v.NewAccount.BillingCountry");
var postalcodeStr=component.get("v.NewAccount.BillingPostalCode");
if(cb==true) {
component.set("v.NewAccount.ShippingStreet",streetStr);
component.set("v.NewAccount.ShippingCity",cityStr);
component.set("v.NewAccount.ShippingState",stateStr);
component.set("v.NewAccount.ShippingCountry",countryStr);
component.set("v.NewAccount.ShippingPostalCode",postalcodeStr);
}
else{
component.set("v.NewAccount.ShippingStreet","");
component.set("v.NewAccount.ShippingCity","");
component.set("v.NewAccount.ShippingState","");
component.set("v.NewAccount.ShippingCountry","");
component.set("v.NewAccount.ShippingPostalCode","");
}
},
SubmitFunction : function(component, event, helper) {
var newacc = component.get('v.NewAccount');
var action=component.get('c.accountinsert');
action.setParams({'acc':newacc});
action.setCallback(this,function(response){
component.set('v.NewAccount',response.getReturnValue());
});
$A.enqueueAction(action);
}
})
Style
.THIS label.slds-form-element__label{
font-size: 15px;
color: #1589ee;
}
.THIS .slds-section__title{
background-color: #1589ee;
color: white
}
.THIS.slds-align--absolute-center{
margin-top:40px;
width:150px;
}
Application
<aura:application extends="force:slds">
<c:AutoFillAddress/>
</aura:application>
Output