如何用HTML+JS实现表单提交后将用户名、邮箱存入数组并展示

• 没有阻止表单的默认提交行为，表单提交会自动刷新页面，导致全局info数组每次提交后都被重置，之前存储的数据全部丢失
• 创建了h2元素但没有挂载到页面的DOM树中，页面自然看不到输出内容
• 直接将数组赋值给innerHTML会触发数组的默认toString()转换，输出的是逗号拼接的普通字符串，不是你需要的数组格式文本，需要用JSON.stringify()转换格式
• display函数没有返回false，表单的onsubmit事件接不到阻止提交的返回值，还是会走默认刷新逻辑

JS代码 #

const info = [];

function display(){
  // 阻止表单默认提交刷新页面的行为
  event.preventDefault();
  var nm = document.getElementById("nm").value;
  var em = document.getElementById("em").value;
  // 简单空值校验，避免提交无效数据
  if(!nm.trim() || !em.trim()) return false;
  var data = [nm, em];
  info.push(data);
  var text = document.createElement("h2");
  // 转成JSON字符串输出标准数组格式
  text.innerHTML = JSON.stringify(info);
  // 将创建的元素插入页面DOM中才能显示
  document.body.appendChild(text);
  // 可选：提交后清空输入框方便下次输入
  document.getElementById("nm").value = '';
  document.getElementById("em").value = '';
  return false;
}

HTML调整说明 #

原有HTML代码可以直接使用，如果你希望每次提交覆盖上一次的输出结果，而非新增多条内容，可以提前预留输出容器：

<body>
  <script src="script.js"></script>
  <form onsubmit="return display()">
    <input type="text" placeholder="Name" id="nm">
    <input type="email" placeholder="Email" id="em">
    <input type="submit" value="Submit">
  </form>
  <!-- 预留输出容器 -->
  <div id="output"></div>
</body>

对应调整JS的输出逻辑即可：

// 替换原有创建h2、插入body的代码
document.getElementById("output").innerHTML = `<h2>${JSON.stringify(info)}</h2>`

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