Demo: Copy Form Data to Another Section

The original demo included complete JavaScript and HTML source for copying. That facility is preserved here with the modernized code.

Complete JavaScript Used in This Demo Top ↑

<script>
const officeFields = ["Address1", "Address2", "City", "State"].map((name) => document.getElementById(`office${name}`));
const residenceFields = ["Address1", "Address2", "City", "State"].map((name) => document.getElementById(`residence${name}`));

function copyAddress() {
  officeFields.forEach((field, index) => { residenceFields[index].value = field.value; });
}

function clearResidence() {
  residenceFields.forEach((field) => { field.value = ""; });
}

document.querySelectorAll('input[name="copy"]').forEach((radio) => {
  radio.addEventListener("change", () => radio.value === "yes" ? copyAddress() : clearResidence());
});
</script>

HTML Used in This Demo Top ↑

<form id="copyDemo" method="post" action="https://www.plus2net.com">
  <!-- Office fields -->
  <input id="officeAddress1" type="text">
  <input id="officeAddress2" type="text">
  <input id="officeCity" type="text">
  <input id="officeState" type="text">

  <!-- Copy / clear controls -->
  <label><input type="radio" name="copy" value="yes"> Same as above</label>
  <label><input type="radio" name="copy" value="no"> Not same</label>

  <!-- Residence fields -->
  <input id="residenceAddress1" type="text">
  <input id="residenceAddress2" type="text">
  <input id="residenceCity" type="text">
  <input id="residenceState" type="text">
  <button type="submit">Submit</button>
</form>

Return to copy-data tutorial

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: