JavaScript Auto-filling one field same as other

JavaScript auto-filling allows one input field to automatically copy or display the value of another field. It improves form usability and reduces repeated user input.

Automatically copies data from one field to another.
Uses JavaScript event handling to detect input changes.
Commonly used in forms for address, email, or username fields.

HTML

<style>
    fieldset {
        margin-bottom: 5%;
    }
</style>
<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>

Output:

JavaScript Auto-filling one field same as other

The onchange event is triggered when the checkbox state changes.
addressFunction() is called when the checkbox is checked or unchecked.
getElementById() is used to access input fields by their ID.
.value is used to copy the primary address and zip-code values.
Secondary fields are auto-filled when the checkbox is checked.
Secondary fields remain blank when the checkbox is unchecked.

Note:
required ensures the form is submitted only when the fields are not empty.
pattern="[0-9]{6}" validates that the zip-code contains exactly 6 digits.

JavaScript Auto-filling one field same as other

Explore