Fill Current Address same as Permanent address in JavaScript

In this tutorial, We will discuss to Fill Current address same as Permanent address with a checkbox in javascript

If you area creating a registration form with the petmanent address and current address then you shoul integrate this feature so that user will not have to re-enter the same address in the current address input field if they have both address are same.

If you integrate this functionality in your website then the current address input filed will be filled with the same input values of permanent address after clicking the checkbox.

current address same as permanent address in javascript

Table of Contents

Auto Fill Current Address same as Permanent Address on clicking the checkbox using JavaScript

Now, we will create a javascript code to fill current address input field same as permanent address by clicking the checkbox.

Learn Also –

1. Create Address Input Fields

I have created address Input Field using Boostrap 4 CDN. So, You must have its basic understanding.

Current Address Input Fields

Input Field Name	Input Field Id
Address Line 1	id=”curAddressLine1″
Address Line 2	id=”curAddressLine2″
Landmark	id=”curLandmark”
Zip Code	id=”curZipcode”
City	id=”curCity”
State	id=”curState”
Country	id=”curCountry”

Permanent Address Input Fields

Input Field Name	Input Field Id
Address Line 1	id=”pAddressLine1″
Address Line 2	id=”pAddressLine2″
Landmark	id=”pLandmark”
Zip Code	id=”pZipcode”
City	id=”pCity”
State	id=”pState”
Country	id=”pCountry”

You can use the following bootstrap code4 directory in your existing registration of your website

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
 <div class="row">
   <div class="col-sm-4">

    <h3 class="text-primary">Permanent Address</h3>
    <p>Enter permanent address as your Identity card</p>
      
    <!--=== Permanent address=== -->
     <div class="form-group">
        <input type="text" class="form-control" placeholder="Address Line 1" id="pAddressLine1">
     </div>

      <div class="form-group">
          <input type="text" class="form-control" placeholder="Address Line 2" id="pAddressLine2">
      </div>

      <div class="form-group">
          <input type="text" class="form-control" placeholder="Landmark" id="pLandmark">
       </div>

      <div class="form-group">
          <input type="text" class="form-control" placeholder="Zip Code" id="pZipcode">
       </div>

      <div class="form-group">
          <input type="text" class="form-control" placeholder="City" id="pCity">
       </div>

      <div class="form-group">
          <input type="text" class="form-control" placeholder="State" id="pState">
       </div>

       <div class="form-group">
          <input type="text" class="form-control" placeholder="country" id="pCountry">
        </div>
    <!--=== Permanent address=== -->

   </div>
   <div class="col-sm-4">


   <h3 class="text-primary">Current Address</h3>

       <div class="form-group">
          <input type="checkbox" id="checkBox"  onclick="autoFilAddress()"> Same as permanent address
       </div>
  
         
     
    <!--=== current address=== -->

      <div class="form-group">
          <input type="text" class="form-control" placeholder="Address Line 1" id="curAddressLine1">
       </div>

      <div class="form-group">
          <input type="text" class="form-control" placeholder="Address Line 2" id="curAddressLine2">
       </div>

      <div class="form-group">
          <input type="text" class="form-control" placeholder="Landmark" id="curLandmark">
       </div>

      <div class="form-group">
          <input type="text" class="form-control" placeholder="Zip Code" id="curZipcode">
       </div>
      <div class="form-group">
          <input type="text" class="form-control" placeholder="City" id="curCity">
       </div>

      <div class="form-group">
          <input type="text" class="form-control" placeholder="State" id="curState">
       </div>

      <div class="form-group">
          <input type="text" class="form-control" placeholder="country" id="curCountry">
       </div>

    <!--=== current address=== -->

   </div>
   <div class="col-sm-4"></div>
</div>
</div>
 
</body>
</html>

2. Fill Current Address same as Permanent Address

You can use the following javascript code directory in your project. If you need to customize it then you can easiy do it.

In this code, I have created a custom function FillAddressInput() that is called within a checkbox so that whenever a user click the check box then It will be executed and fill the current address input field with the values of permanent address input field.

<script type="text/javascript">

function FillAddressInput()
    {
       let checkBox= document.getElementById('checkBox');

       let pAddressLine1 = document.getElementById("pAddressLine1");
       let pAddressLine2 = document.getElementById("pAddressLine2");
       let pLandmark = document.getElementById("pLandmark");
       let pZipcode = document.getElementById("pZipcode");
       let pCity = document.getElementById("pCity");
       let pState = document.getElementById("pState");
       let pCountry = document.getElementById("pCountry");

       let curAddressLine1 = document.getElementById("curAddressLine1");
       let curAddressLine2 = document.getElementById("curAddressLine2");
       let curLandmark = document.getElementById("curLandmark");
       let curZipcode = document.getElementById("curZipcode");
       let curCity = document.getElementById("curCity");
       let curState = document.getElementById("curState");
       let curCountry = document.getElementById("curCountry");

        if (checkBox.checked == true)
        {
        
       let pAddressLine1Value = pAddressLine1.value;
       let pAddressLine2Value = pAddressLine2.value;
       let pLandmarkValue     = pLandmark.value;
       let pZipcodeValue      = pZipcode.value;
       let pCityValue         = pCity.value;
       let pStateValue        = pState.value;
       let pCountryValue      = pCountry.value;

       curAddressLine1.value = pAddressLine1Value; 
       curAddressLine2.value = pAddressLine2Value; 
       curLandmark.value     = pLandmarkValue;   
       curZipcode.value      = pZipcodeValue;     
       curCity.value         = pCityValue;     
       curState.value        = pStateValue;       
       curCountry.value      = pCountryValue;      


       }
        else
        {
       curAddressLine1.value = "";
       curAddressLine2.value = ""; 
       curLandmark.value     = "";     
       curZipcode.value      = "";     
       curCity.value         = "";         
       curState.value        = "";       
       curCountry.value      = "";           }
    }

</script>

3. Test it Yourself by clicking the checkbox

After Implementing previous steps, You can test it yourself by opening in the web broeser and clicking checkbox.