如何通过JavaScript或其他方式从着陆页填充HTML表单数据？

注：你提供的HTML表单存在语法错误，<input type="button">Submit</button> 应该改为 <button type="button">Submit</button> 或者 <input type="button" value="Submit">，否则按钮无法正常渲染。

情况1：着陆页与表单在同一页面 #

如果展示记录的列表和表单在同一个页面，直接通过JavaScript绑定点击事件即可实现数据填充：

示例代码 #

HTML部分

<!-- 已提交记录列表 -->
<div class="record-list">
  <div class="record">
    <span>姓名：张三</span>
    <span>姓氏：张</span>
    <span>年龄：25</span>
    <button class="fill-btn" data-name="张三" data-lastname="张" data-age="25">添加</button>
  </div>
  <div class="record">
    <span>姓名：李四</span>
    <span>姓氏：李</span>
    <span>年龄：30</span>
    <button class="fill-btn" data-name="李四" data-lastname="李" data-age="30">添加</button>
  </div>
</div>

<!-- 修正后的表单 -->
<form>
  <input type="text" name="name1" id="name1">
  <input type="text" name="lastname" id="lastname">
  <input type="text" name="age" id="age">
  <button type="button">Submit</button>
</form>

JavaScript部分

// 获取所有"添加"按钮
const fillButtons = document.querySelectorAll('.fill-btn');
// 获取表单输入框
const nameInput = document.getElementById('name1');
const lastNameInput = document.getElementById('lastname');
const ageInput = document.getElementById('age');

// 给每个按钮绑定点击事件
fillButtons.forEach(btn => {
  btn.addEventListener('click', function() {
    // 从按钮的data属性中获取记录数据
    const name = this.dataset.name;
    const lastName = this.dataset.lastname;
    const age = this.dataset.age;
    
    // 填充到表单输入框
    nameInput.value = name;
    lastNameInput.value = lastName;
    ageInput.value = age;
  });
});

情况2：着陆页与表单在不同页面 #

如果记录列表和表单分属两个页面，可以通过以下两种方式传递数据：

方案A：URL参数传递 #

着陆页（记录页面）的按钮点击逻辑

// 假设某条记录的数据为：name="王五", lastname="王", age="28"
document.querySelector('.fill-btn').addEventListener('click', function() {
  // 构造带参数的表单页面URL
  const formUrl = `form.html?name=王五&lastname=王&age=28`;
  // 跳转到表单页面
  window.location.href = formUrl;
});

表单页面的填充逻辑

// 页面加载时读取URL参数
window.addEventListener('load', function() {
  // 获取URL参数对象
  const params = new URLSearchParams(window.location.search);
  // 提取参数值
  const name = params.get('name');
  const lastName = params.get('lastname');
  const age = params.get('age');
  
  // 填充到表单
  if (name) document.getElementById('name1').value = name;
  if (lastName) document.getElementById('lastname').value = lastName;
  if (age) document.getElementById('age').value = age;
});

方案B：本地存储（localStorage/sessionStorage） #

适合需要传递较多数据或不想暴露数据在URL中的场景：

着陆页点击逻辑

document.querySelector('.fill-btn').addEventListener('click', function() {
  // 存储记录数据到localStorage
  localStorage.setItem('recordData', JSON.stringify({
    name: '赵六',
    lastname: '赵',
    age: '32'
  }));
  // 跳转到表单页面
  window.location.href = 'form.html';
});

表单页面填充逻辑

window.addEventListener('load', function() {
  // 读取localStorage中的数据
  const recordData = JSON.parse(localStorage.getItem('recordData'));
  if (recordData) {
    document.getElementById('name1').value = recordData.name;
    document.getElementById('lastname').value = recordData.lastname;
    document.getElementById('age').value = recordData.age;
    // 可选：读取后清除存储的数据，避免下次误填充
    localStorage.removeItem('recordData');
  }
});

内容的提问来源于stack exchange，提问作者user2021672