JavaScript | Auto-filling one field same as other

(This article takes some prior knowledge of HTML, CSS and JavaScript.)
You might have noticed that sometimes websites like e-commerce or some government website have two address fields in their forms.One for primary address and another for secondary address(or one for billing address and another for shipping address etc).
Most of the time people have same primary and secondary addresses and to save us from the tedious work of re-entering same data again they have some kind of option to automatically copy the contents of one fields into another.
We are going to see how to make such kind of Auto-Complete form using JavaScript.
In the form we are going to discuss, there is a checkbox and whenever it is checked, the code automatically copies values from primary address and primary zip-code to the secondary address and secondary zip-code respectively.If the checkbox is unchecked, these fields will go blank.
Here is the simple code for such kind of form:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en"
<head> 
<meta charset="UTF-8">     
<title>Form Auto Fill</title> 
<style>                     
fieldset{ margin-bottom: 5%; }         
</style>
</head>
  
<body> 
<h1>AutoFill Form</h1>     
<form>
  
//Fields for primary address 
<fieldset>             
<legend><b>Primary Address</b></legend>     
<label for ="primaryaddress">Address:</label>         
<input type = "text" name = "Address" id = "primaryaddress" required><br/> 
<label for = "primaryzip">Zip code:</label>     
<input type = "text" name = "Zip code" id = "primaryzip" 
                  pattern = "[0-9]{6}" required><br/> 
</fieldset>
      
<input type="checkbox" id="same" name="same" onchange= "addressFunction()"/>             
<label for = "same">If same secondary address select this box.</label>
  
// Fields for secondary address 
<fieldset>                             
<legend><b>Secondary Address</b></legend>             
<label for ="secondaryaddress">Address:</label>     
<input type = "text" name = "Address" id = "secondaryaddress" required><br/>             
<label for = "secondaryzip">Zip code:</label>         
<input type = "text" name = "Zip code" id = "secondaryzip" 
                  pattern = "[0-9]{6}" required><br/> 
</fieldset>
  
// Submit button in the form 
<input type = "submit" value = "Submit"/> 
</form>
  
// JavaScript Code
<script>
function addressFunction()
{
  if (document.getElementById('same').checked)
  {
    document.getElementById('secondaryaddress').value=document.
             getElementById('primaryaddress').value;
    document.getElementById('secondaryzip').value=document.
             getElementById('primaryzip').value
  }
      
  else
  {
    document.getElementById('secondaryaddress').value="";
    document.getElementById('secondaryzip').value="";
  }
}
</script>
</body>
</html>

chevron_right


#This is how the form will look like before checking the box:
before checking box

#And this is how it will look after checking the box:
after checking the box
Note: features like

  • ‘required'(line 18, 20, 29, 31)-ensures that form will only be submitted if these fields are non-empty;
  • ‘pattern = “[0-9]{6}”‘(line 20, 31)-ensures that format of zip-code is correct i.e., six digit zip-code.

Explanation:
When the checked state of checkbox is changed the ‘onchange'(see line 23) event will occur which will call the ‘addressFunction()’.
If the box is checked, values of primary address and primary zip-code will be copied to secondary address and secondary zip-code(by using ‘getElementById()’ function we are referring to a element of particular Id and ‘.value’ to access the value at that particular Id element).
Otherwise, these fields will remain blank so that it can be filled by user(in case of different primary and secondary address).



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.