Logo - ProgrammingHead

How to make Billing Address Same as Shipping Address

If you want to set the Billing Address Same as Shipping Address, then you are at the Right Place.
Because in this Tutorial we have created an HTML Webpage to answer your Question.
Here using this CODE, we can copy or Fill the Any Input Field the Same as Shipping Address with a single button click.

How to make Billing Address Same as Shipping Address

index.html - Billing Address Same as Shipping Address

<!DOCTYPE html>
<html>
<body>
	<textarea id="ShippingAd"></textarea>  
    <br/>
	<input type="checkbox" id="myCheck" onclick="myFunction()">  
	<label for="myCheck">Same as Shipping Address:</label>   
	<br/>
	<textarea id="BillingAd"></textarea><br/>   
<script>
  function myFunction() {
    var checkBox = document.getElementById("myCheck");  
    var textShip = document.getElementById("ShippingAd");  
    var textBil = document.getElementById("BillingAd");  
    if (checkBox.checked == true){
          textBil.value=textShip.value;  
    } else {
          textBil.value="";
    }
  }
</script>
</body>
</html>

Results

code from Above Explained in Detail:

use of myFunction()

Using Input box's onClick event, we will call JavaScript functions [onclick="myFunction()"]
Which includes Some Variables and If Else Condition.

use of Variables for Input, Shipping and Billing Inputs

By using this var checkBox we will store our Input box Element [Check Box Input] by using this CODE.

my.js

var checkBox = document.getElementById("myCheck");

Where document.getElementById("myCheck") will grab the HTML element by the Element ID: myCheck.
We will do the same for grabbing Shipping Address Element and Billing Address.

my.js

var textShip = document.getElementById("ShippingAd");  
var textBil = document.getElementById("BillingAd");

use of IF ELSE Conditions

By using IF Else condition we will check waters CheckBox is checked or NOT.
For that we are giving here this Condition.

Where checkBox.checked will return TRUE or FALSE on Checking/Unchecking the Input Check Box

my.js

if (checkBox.checked == true){
}
else {
}

Copying Input Values to Billing Address textBil.value=textShip.value

Using this link textBil.value=textShip.value;
We will Put Shipping Address Value (textShip.value) inside Billing Address (textBil.value) Text Field.

use of textBil.value=" ";

And by using this line textBil.value=" ";
We are clearing or Putting Empty String inside our Billing Address Text Feild whenever user uncheck the Input Box.

my.js

if (checkBox.checked == true){
    //copy the Address
    textBil.value=textShip.value;  
} else {
    //clear the Address
    textBil.value="";
}