表单提交后插入表格的数据消失问题求助

问题根源 #

点击Submit按钮时，浏览器会执行表单的默认提交行为——刷新页面并尝试向服务器发送请求。你的代码只在输入为空时阻止了这个默认行为，正常提交时没有拦截，导致页面刷新，刚插入的表格数据直接被清空。

修复方案 #

把两个submit事件监听合并，统一处理验证和数据添加逻辑，同时始终阻止表单默认提交行为（如果不需要真的把数据提交到服务器的话）：

修改后的JavaScript代码

let myform = document.querySelector("form");
let myFN = document.getElementById("fname");
let myLN = document.getElementById("lname");
let MyPar = document.querySelector("p");

myform.addEventListener("submit", (e) => {
  // 先阻止页面刷新，这是关键
  e.preventDefault();
  
  // 验证输入是否为空
  if (myFN.value === "" || myLN.value === "") {
    MyPar.textContent = '请填写所有字段';
    return; // 验证失败，不执行后续添加数据的逻辑
  }
  
  // 显示表格并插入新数据
  document.getElementById("table").style.display = "block";
  let table = document.getElementById("table");
  let row = table.insertRow(-1);
  let fname1 = row.insertCell(0);
  let lname1 = row.insertCell(1);

  // 用textContent比innerHTML更安全，避免恶意输入风险
  fname1.textContent = myFN.value;
  lname1.textContent = myLN.value;
  
  // 可选：清空输入框和提示文本，提升体验
  myFN.value = "";
  myLN.value = "";
  MyPar.textContent = "";
});

CSS代码（无需修改）

table {
  display: none;
}

table,
td {
  border: 1px solid black;
}

HTML代码（无需修改）

<form>
  <div>
    <label for="fname">First name: </label>
    <input id="fname" type="text" />
  </div>
  <div>
    <label for="lname">Last name: </label>
    <input id="lname" type="text" />
  </div>
  <div>
    <input id="submit" type="submit" />
  </div>
</form>
<p></p>

<table id="table">
  <tr>
    <th>FirstName</th>
    <th>LastName</th>
  </tr>
</table>

额外说明 #

• 合并事件监听后逻辑更集中，避免多个事件触发的顺序问题
• 使用textContent替代innerHTML能避免XSS安全风险，更适合处理用户输入的文本
• 验证失败时用return跳过后续操作，逻辑更清晰

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