Copy Form Field Values to Another Form Section with JavaScript

Forms sometimes ask for the same information twice, such as office and residence addresses. A “Same as above” control can copy the first group into the second so the user does not retype identical values.

residenceAddress1.value = officeAddress1.value;
residenceCity.value = officeCity.value;

Open copy-data demo →

Copy Text Field Values Top ↑

function copyAddress() {
  residenceAddress1.value = officeAddress1.value;
  residenceAddress2.value = officeAddress2.value;
  residenceCity.value = officeCity.value;
  residenceState.value = officeState.value;
}

Connect Same / Not Same Controls Top ↑

The original example uses two radio buttons. That pattern is preserved, but event listeners keep JavaScript out of the HTML attributes.

<label><input type="radio" name="copy" value="yes"> Same as above</label>
<label><input type="radio" name="copy" value="no"> Not same</label>

document.querySelectorAll('input[name="copy"]').forEach((radio) => {
  radio.addEventListener("change", () => {
    if (radio.value === "yes") {
      copyAddress();
    } else {
      clearResidence();
    }
  });
});

Clear the Second Group Top ↑

function clearResidence() {
  [residenceAddress1, residenceAddress2, residenceCity, residenceState]
    .forEach((field) => { field.value = ""; });
}

Copy Once or Keep the Fields in Sync? Top ↑

This example copies a snapshot when “Same as above” is selected. If the office address changes later, the residence address does not automatically change unless you also listen for input events. For most forms, a one-time copy is less surprising because it does not overwrite later edits.

Copy a Select Value Too Top ↑

If one field is a dropdown, assigning the destination select’s value selects the matching option. See copy form data with a listbox.

Related Tutorials Top ↑

Radio button click events · Event handling · Select and copy textarea text

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: