表单onsubmit提交时隐藏表单后结果表格无法显示问题求助

问题原因 #

• HTML结构存在未闭合的标签，浏览器解析DOM时结构错乱，导致修改元素显示状态的逻辑不生效
• 若缺失readFormData、insertNewRecord函数的实现，函数执行报错会阻断后续代码运行，严重时会导致页面逻辑完全异常
• 未给结果表格设置初始隐藏样式，同时inline事件绑定中直接使用event存在潜在兼容性问题

修复方案 #

1. 补充初始CSS样式 #

首先给结果表格设置默认隐藏：

#employeeList {
  display: none;
}

2. 修正HTML结构 #

补全所有未闭合的标签，同时优化表单提交事件的传参：

<div class="container">
  <form name="catalogform" id="catalogform" method="GET" onsubmit="handleSubmit(event)" autocomplete="off">
    <div class="item">
      <label for="whendate"><b>When</b></label>
      <input id="whendate" type="date" name="whendate" required/>
    </div>
    <div class="item">
      <label for="whoaccount"><b>Who</b></label>
      <input id="whoaccount" type="text" name="whoaccount" required/>
    </div>
    <div class="item">
      <label for="comment"><b>Comment</b></label>
      <textarea rows="3" id="commenttext"></textarea>
    </div>
    <div class="item">
      <label for="about"><b>About</b></label>
      <input id="about" type="text" name="about" required/>
    </div>
    <div class="form-action-buttons">
      <input type="submit" value="Submit">
    </div>
  </form>
</div>
<div class="tables">
  <table class="list" id="employeeList">
    <thead>
      <tr>
        <th>When</th>
        <th>Who</th>
        <th>Comment</th>
        <th>About</th>
        <th>Media</th>
        <th>What</th>
        <th>Whom</th>
        <th>Reference ID</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

3. 修正JS逻辑 #

优化提交事件处理逻辑，补充缺失的工具函数实现：

function handleSubmit(e) {
  // 优先阻止表单默认提交行为，避免页面刷新
  e.preventDefault();
  try {
    const formData = readFormData();
    insertNewRecord(formData);
    document.getElementById('catalogform').style.display = 'none';
    document.getElementById('employeeList').style.display = 'block';
  } catch (err) {
    // 开发环境可打开下方注释查看报错信息
    // console.error('逻辑执行错误：', err)
  }
}

// 读取表单数据工具函数
function readFormData() {
  return {
    whendate: document.getElementById('whendate').value,
    whoaccount: document.getElementById('whoaccount').value,
    comment: document.getElementById('commenttext').value,
    about: document.getElementById('about').value
  }
}

// 插入表格行工具函数
function insertNewRecord(data) {
  const tbody = document.querySelector('#employeeList tbody');
  const newRow = tbody.insertRow();
  newRow.insertCell(0).textContent = data.whendate;
  newRow.insertCell(1).textContent = data.whoaccount;
  newRow.insertCell(2).textContent = data.comment;
  newRow.insertCell(3).textContent = data.about;
  // 剩余空列填充
  for(let i = 4; i < 8; i++) {
    newRow.insertCell(i).textContent = '';
  }
}

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