Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
JavaScript Auto-filling one field same as other
Auto-filling form fields is a common requirement in web forms, especially when users need to copy address information between billing and shipping sections. This can be achieved using JavaScript event listeners and form field manipulation.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.form-section {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}
input[type="text"] {
margin: 5px;
padding: 8px;
width: 200px;
}
.checkbox-section {
margin: 15px 0;
padding: 10px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>JavaScript Auto-filling Form Fields</h1>
<div class="form-section">
<h2>Primary Address</h2>
Address: <input class="address" type="text" placeholder="Enter address" />
<br>
Pin Code: <input class="pincode" type="text" placeholder="Enter pin code" />
</div>
<div class="checkbox-section">
<input class="check" type="checkbox" />
<label>Secondary address same as primary</label>
</div>
<div class="form-section">
<h2>Secondary Address</h2>
Address: <input class="address" type="text" placeholder="Enter address" />
<br>
Pin Code: <input class="pincode" type="text" placeholder="Enter pin code" />
</div>
<script>
let checkEle = document.querySelector(".check");
let addressEle = document.querySelectorAll(".address");
let pinCodeEle = document.querySelectorAll(".pincode");
checkEle.addEventListener("change", (event) => {
if (event.target.checked) {
// Copy primary address to secondary
addressEle[1].value = addressEle[0].value;
pinCodeEle[1].value = pinCodeEle[0].value;
// Disable secondary fields
addressEle[1].disabled = true;
pinCodeEle[1].disabled = true;
} else {
// Clear and enable secondary fields
addressEle[1].value = "";
pinCodeEle[1].value = "";
addressEle[1].disabled = false;
pinCodeEle[1].disabled = false;
}
});
// Real-time sync when checkbox is checked
addressEle[0].addEventListener("input", () => {
if (checkEle.checked) {
addressEle[1].value = addressEle[0].value;
}
});
pinCodeEle[0].addEventListener("input", () => {
if (checkEle.checked) {
pinCodeEle[1].value = pinCodeEle[0].value;
}
});
</script>
</body>
</html>
How It Works
The script uses the following approach:
-
Element Selection: Uses
querySelectorandquerySelectorAllto target form elements by class -
Event Listening: Listens for
changeevents on the checkbox andinputevents on primary fields - Field Synchronization: Copies values from primary fields (index 0) to secondary fields (index 1)
- Field Control: Disables secondary fields when checkbox is checked to prevent manual editing
Key Features
| Feature | Description |
|---|---|
| Auto-fill on Check | Copies primary address to secondary when checkbox is checked |
| Real-time Sync | Updates secondary fields automatically as you type in primary fields |
| Field Disabling | Prevents manual editing of secondary fields when sync is active |
| Clear on Uncheck | Clears and re-enables secondary fields when checkbox is unchecked |
Conclusion
This auto-fill implementation provides a smooth user experience by synchronizing form fields through JavaScript event handlers. It handles both initial copying and real-time updates, making forms more user-friendly and reducing data entry errors.
Updated on: 2026-03-15T23:18:59+05:30
425 Views
Advertisements