JavaScript से एक फील्ड को दूसरे के समान ऑटो-फिल करें

एक फील्ड को दूसरे फील्ड के समान स्वचालित रूप से भरने के लिए JavaScript का उपयोग करना एक सामान्य आवश्यकता है, विशेष रूप से फॉर्म में जहां प्राथमिक और द्वितीयक पते समान हो सकते हैं।

उदाहरण

<!DOCTYPE html> <html> <head> <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } 
</style> </head> <body> 
<h1>JavaScript ऑटो-फिल फील्ड उदाहरण</h1> 
<h2>अपना प्राथमिक पता दर्ज करें</h2> 
पता<input class="address" type="text" /> 
पिन कोड<input class="pincode" type="text" /> 
<h4>द्वितीयक पता प्राथमिक के समान</h4> 
<input class="check" type="checkbox" /> समान पता 
<h2>अपना द्वितीयक पता दर्ज करें</h2> 
पता<input class="address" type="text" /> 
पिन कोड<input class="pincode" type="text" /> 
<script type="text/javascript"> 
    let checkEle = document.querySelector(".check"); 
    let addressEle = document.querySelectorAll(".address"); 
    let pinCodeEle = document.querySelectorAll(".pincode"); 
    checkEle.addEventListener("change", (event) => { 
        if (event.target.checked) { 
            addressEle[1].value = addressEle[0].value; 
            pinCodeEle[1].value = pinCodeEle[0].value; 
        } 
    }); 
</script> </body> </html>

आउटपुट

जब उपयोगकर्ता प्राथमिक पता भरता है और "समान पता" चेकबॉक्स पर क्लिक करता है, तो द्वितीयक पता और पिन कोड फील्ड स्वचालित रूप से प्राथमिक मानों से भर जाते हैं।

बेहतर संस्करण: आप चेकबॉक्स अनचेक करने पर फील्ड खाली करने की कार्यक्षमता भी जोड़ सकते हैं:

checkEle.addEventListener("change", (event) => { 
    if (event.target.checked) { 
        addressEle[1].value = addressEle[0].value; 
        pinCodeEle[1].value = pinCodeEle[0].value; 
    } else { 
        addressEle[1].value = ""; 
        pinCodeEle[1].value = ""; 
    } 
});