如何实现点击Submit Button后展示HTML表单的计算结果？

要实现点击提交按钮后才展示计算结果，需要做以下几点调整：

• 移除<form>标签上的oninput实时计算事件
• 给<form>添加onsubmit事件，在提交时执行计算逻辑，同时阻止表单默认的跳转行为
• 编写计算函数，获取输入值并完成计算后更新输出框内容

修改后的完整代码如下：

<form onsubmit="calculateResult(event)">
  <label for="a">宽度 (ft)</label>&nbsp
  <input type="number" id="a" value=""><br><br>
  <label for="b">长度 (ft)</label>
  <input type="number" id="b" value=""><br><br>
  <label for="c">高度 (ft)</label>
  <input type="number" id="c" value=""><br><br>
  <button type="submit">提交</button>
  <output name="x" for="a b c"></output>
</form>

<script>
function calculateResult(e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  
  // 获取三个输入框的值
  const width = parseFloat(document.getElementById('a').value);
  const length = parseFloat(document.getElementById('b').value);
  const height = parseFloat(document.getElementById('c').value);
  
  // 计算结果（确保数值有效时才计算）
  if (!isNaN(width) && !isNaN(length) && !isNaN(height)) {
    const result = (width * length * height * 1.3).toFixed(2);
    document.getElementsByName('x')[0].value = result;
  } else {
    // 输入无效时提示（可选）
    document.getElementsByName('x')[0].value = "请输入有效数值";
  }
}
</script>

关键改动说明： #

1. 把原表单的oninput替换为onsubmit="calculateResult(event)"，点击提交按钮时触发自定义计算函数
2. 给按钮添加type="submit"明确其提交按钮的角色
3. 新增calculateResult函数：
   • 用e.preventDefault()阻止表单默认的刷新/跳转行为
   • 获取输入值并转为浮点数，判断是否为有效数值
   • 执行原计算逻辑，将结果赋值给output框；若输入无效则给出提示

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