JavaScript表单提交后表格写入数据随即被清空如何解决

提交后数据短暂出现随即消失，核心原因是表单默认提交行为触发了页面刷新：
你使用的提交按钮是type="submit"类型，点击时除了执行你绑定的onFormSubmit()逻辑写入表格，还会触发表单原生的提交动作——这个动作默认会重载当前页面，你之前通过JS写入DOM的表格内容会随着页面重载被全部重置，看起来就像写完马上被清空。
注意：你代码里的resetform()函数仅会清空输入框内容，不会修改表格单元格内容，不是导致数据消失的原因。
另外你的表格HTML结构存在不规范问题：<tbody>标签下直接放<td>，没有包裹<tr>行标签，会导致表格渲染异常。

• 阻止表单默认提交行为，二选一即可：
  1. 保留type="submit"的前提下，在提交处理函数里调用方法阻止默认事件；
  2. 直接把按钮的type属性从submit改成button，从根源上避免触发表单默认提交。
• 修正表格结构，给tbody内的单元格套上<tr>行标签。
• 删除onFormSubmit函数里三行无意义的取值代码（这三行只取了输入框值但没有做任何赋值/存储操作，没有实际作用）。

index.html #

<body>
<form id='freg'>

  <label>firstname</label>
  <input type='text' id='fname'>

  <label>lastname</label>
  <input type='text' id='lname'>

  <label>officelocation</label>
  <input type='text' id='location'>
  <!-- 若保留type="submit"，需把onclick改为onclick='onFormSubmit(event)'，配合JS阻止默认行为 -->
  <input id='btn' type='button' value='submit' onclick='onFormSubmit()'/>

</form>
<br/><br/>

<table>
   <thead>
      <tr>
        <th>firstname</th>
        <th>lastname</th>
        <th>location</th>
      </tr>
    </thead>
    <tbody>
       <!-- 补全tr标签包裹td，符合表格规范 -->
       <tr>
         <td id='ffname'></td>
         <td id='llname'></td>
         <td id='olocation'></td>
       </tr>
    </tbody>
</table>

<script type='text/javascript' src='index.js'></script>
</body>

index.js #

function onFormSubmit() {
  // 删除原代码中三行无意义的取值逻辑，直接调用数据读取方法
  readFormData();
}

function readFormData() {
  var data = {};
  data.fname = document.getElementById('fname').value;
  data.lname = document.getElementById('lname').value;
  data.location = document.getElementById('location').value;
  insertnewrecord(data);
}

function insertnewrecord(data) {
  document.getElementById('ffname').innerHTML = data.fname;
  document.getElementById('llname').innerHTML = data.lname;
  document.getElementById('olocation').innerHTML = data.location;
  resetform();
}

function resetform() {
  document.getElementById('fname').value = "";
  document.getElementById('lname').value = "";
  document.getElementById('location').value = "";
}

如果选择保留按钮type="submit"的方案，只需要做两处修改：1. 把按钮的onclick属性改成onclick='onFormSubmit(event)'；2. 在onFormSubmit函数最开头加一行event.preventDefault();，效果完全一致。

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