• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar

CodingStatus

- Learn Coding to Build Web Applications

  • HTML
  • JavaScript
  • jQuery
  • ReactJS
  • Ajax
  • Node.js
  • PHP
  • SQL
  • Interview Questions

Fill Current Address same as Permanent address in JavaScript

September 25, 2021 By Md Nurullah Leave a Comment

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

Contents

  • Auto Fill Current Address same as Permanent Address on clicking the checkbox using JavaScript
    • 1. Create Address Input Fields
    • 2. Fill Current Address same as Permanent Address
    • 3. Test it Yourself by clicking the checkbox

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 –

  • JavaScript Password Strength Checker
  • Detect Internet Connection using JavaScript
  • Detect Adblocker using javascript
  • JavaScript Form Validation

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 NameInput Field Id
Address Line 1id=”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 NameInput Field Id
Address Line 1id=”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.

Related Posts:

  • Create Charts in React Js
  • Create Registration and Login Form in Node.js & MySQL
  •  How to Create Auto Resize Textarea Using JavaScript
  • PHP Registration Form

Filed Under: JavaScript

Hey there, Welcome to CodingStatus. My Name is Md Nurullah from Bihar, India. I'm a Software Engineer. I have been working in the Web Technology field for 3 years. Here, I blog about Web Development & Designing. Even I help developers to build the best Web Applications.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Follow us

  • facebook
  • twitter
  • linkedin

Latest Tutorials

  • HTML Heading Tags
  • Compress Image Size in PHP Without Losing Quality
  • How to Trigger a Click Event on Pressing Enter Key Using jQuery
  • HTML Elements
  • JavaScript Countdown Timer

Popular Tutorials

  • JavaScript Countdown Timer
  • Get Query String Value From URL Using JavaScript
  • JavaScript Accordion with Example
  • Calculate Marks Percentage in JavaScript
  • Fill Current Address same as Permanent address in JavaScript

Categories

  • Ajax (10)
  • Django (5)
  • HTML (4)
  • Interview Questions (5)
  • JavaScript (18)
  • jQuery (11)
  • Laravel (2)
  • Node.js (22)
  • PHP (39)
  • ReactJS (35)
  • SQL (12)
  • Tips (7)
  • Home
  • About Us
  • Privacy Policy
  • Disclaimer
  • Terms & Conditions
  • Sitemap
  • Contact Us

Copyright © 2023 CodingStatus - All Rights Reserved