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
How to autofill a field in JavaScript same as another?
Automatically filling a field in JavaScript is a common requirement in web forms, where one field copies the value from another. This feature eliminates the need to write the same information in multiple fields.
This is useful in real-life scenarios, such as forms where users enter a permanent address and need to add a temporary address. If both addresses are the same, using the autofill feature, they can automatically copy the permanent address to the temporary address field. This article explains how to create autofill functionality in JavaScript.
Core Concept: Copying Field Values
The main concept is to create an autofill feature that copies the value from one field to another. You can implement this using JavaScript event listeners and DOM manipulation to update field values dynamically.
Implementation Steps
Follow these steps to implement autofill functionality:
- Set Up HTML Structure: Create two input fields (source and target) and a button to trigger the autofill action.
-
Write JavaScript Logic:
- Use
document.querySelector()to select the button element - Use
document.querySelectorAll()to select both input fields - Add an event listener to copy values from source to target field
- Use
- Test Functionality: Verify that clicking the button copies the first field's value to the second field.
Example: Button-Triggered Autofill
<!DOCTYPE html>
<html>
<head>
<title>Autofill Example</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
input {
padding: 8px;
margin: 5px 0;
display: block;
width: 300px;
}
button {
padding: 8px 15px;
margin: 10px 0;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Address Autofill Example</h1>
<label>Permanent Address:</label>
<input type="text" class="addr" placeholder="Enter permanent address" />
<button class="btn-autofill">Copy to Temporary Address</button>
<label>Temporary Address:</label>
<input type="text" class="addr" placeholder="Temporary address" />
<script>
let btnElement = document.querySelector(".btn-autofill");
let addressFields = document.querySelectorAll(".addr");
btnElement.addEventListener("click", () => {
// Copy value from first field to second field
addressFields[1].value = addressFields[0].value;
console.log("Address copied successfully!");
});
</script>
</body>
</html>
Real-Time Autofill Example
You can also create real-time autofill that updates automatically as the user types:
<!DOCTYPE html>
<html>
<head>
<title>Real-time Autofill</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
input { padding: 8px; margin: 5px 0; display: block; width: 300px; }
.checkbox-container { margin: 10px 0; }
</style>
</head>
<body>
<h1>Real-time Address Copy</h1>
<label>Billing Address:</label>
<input type="text" id="billing" placeholder="Enter billing address" />
<div class="checkbox-container">
<input type="checkbox" id="sameAddress" />
<label for="sameAddress">Shipping address same as billing</label>
</div>
<label>Shipping Address:</label>
<input type="text" id="shipping" placeholder="Enter shipping address" />
<script>
let billingField = document.getElementById("billing");
let shippingField = document.getElementById("shipping");
let checkbox = document.getElementById("sameAddress");
// Real-time copying when checkbox is checked
billingField.addEventListener("input", () => {
if (checkbox.checked) {
shippingField.value = billingField.value;
}
});
// Toggle autofill on checkbox change
checkbox.addEventListener("change", () => {
if (checkbox.checked) {
shippingField.value = billingField.value;
shippingField.disabled = true;
} else {
shippingField.disabled = false;
}
});
</script>
</body>
</html>
JavaScript Code Explanation
- document.querySelector(): Selects the button element using its class name
- document.querySelectorAll(): Selects all input fields with the specified class, returning a NodeList
- addEventListener(): Attaches an event listener to trigger the copy function
-
Value Assignment: Copies the value from the source field to the target field using
element.value
Common Use Cases
- Copying billing address to shipping address in e-commerce forms
- Auto-filling emergency contact information
- Duplicating company details across multiple form sections
- Synchronizing user profile information
Conclusion
Autofill functionality in JavaScript improves user experience by reducing repetitive data entry. Whether triggered by buttons or real-time events, this feature makes forms more user-friendly and efficient.
1K+ Views
