为什么我的HTML表单提交后没有展示输入的内容？

问题根源 #

表单的默认提交行为会触发页面重载，你的form()函数虽然成功把值写入了<p id="firstname">节点，但写入完成后页面立刻刷新，之前写入的内容就被清空，因此看不到展示效果。代码本身没有语法错误，所以控制台不会抛出报错。

解决方案 #

提供两种常用修复方式，按需选择即可：

方案1：阻止表单默认提交行为 #

有两种实现方式可选：

• 修改form标签的onsubmit属性，添加return false拦截默认提交：

  <form id="form1" onsubmit="form(); return false;">
  

• 传入事件对象在函数内拦截：
  先修改form标签的事件绑定：

  <form id="form1" onsubmit="form(event)">
  

  再修改JS函数逻辑：

  function form(e) {
    e.preventDefault();
    var x = document.getElementById("form1").elements[0].value;
    document.getElementById("firstname").innerHTML = x;
  }
  

方案2：避开表单提交逻辑，改用按钮点击事件 #

把提交按钮改为普通按钮，绑定点击事件触发逻辑，完全绕过表单默认提交行为：

<input type="button" value="Submit" onclick="form()">

此时可以删除form标签上的onsubmit属性，无需触发表单提交事件。

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