We might have noticed that sometimes websites like e-commerce or some government website have two address fields in their forms. One for the primary address and another for the secondary address(or one for billing address and another for the shipping address etc).
Most of the time people have the same primary and secondary addresses and to save us from the tedious work of re-entering the same data again they have some kind of option to automatically copy the contents of one field into another. We are going to see how to make such kind of Auto-Complete form using JavaScript.
<!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>
<input type="submit"
value="Submit" />
</form>
<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>- ‘required'(line 18, 20, 29, 31)-ensures that the 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.
When the checked state of the checkbox is changed the ‘onchange'( line 23) event will occur which will call the ‘addressFunction()’