表单提交时页面刷新（vanilla javascript）？答案

【问题标题】：Page refresh on form submit (vanilla javascript)?表单提交时页面刷新（vanilla javascript）？
【发布时间】：2016-04-14 02:54:31
【问题描述】：

我正在学习 Javascript.... 慢慢地... 并尝试用一个小计算器测试我的知识...

HTML：

<form id="calculator" onSubmit="multiply()">
<input type="number" id="first">
*
<input type="number" id="second">
<input type="submit"> = <span id="answer"></span>
</form>

Javascript：

function multiply() {
    var x = document.getElementById("first").value;
    var y = document.getElementById("second").value;
    var z = x * y;
    document.getElementById("answer").innerHTML = z;
}

我遇到但不知道的问题是为什么在表单提交/按钮单击/返回键上刷新页面？我究竟做错了什么？纯Javascript的答案是什么。我知道计算器在一定程度上可以工作，因为答案在刷新之前会在页面上闪烁，但它确实如此。为什么？

（我知道以前有人问过这个问题，但我找不到纯 Javascript 的答案和/或我能理解的解释）。

【问题讨论】：

在表单中返回一些东西？

标签： javascript html forms form-submit page-refresh

【解决方案1】：

在方法中使用 return false 并在提交时修改以返回 multiply()。这是脚本

function multiply() {
  var x = document.getElementById("first").value;
  var y = document.getElementById("second").value;
  var z = x * y;
  document.getElementById("answer").innerHTML = z;
  return (false);
}

这是修改后的 HTML

<form id="calculator" onSubmit="return multiply()" method="post">
  <input type="number" id="first"> *
  <input type="number" id="second">
  <input type="submit"> = <span id="answer"></span>
</form>

这是 jsfiddle - https://jsfiddle.net/anuraj_p/sjvvod8q/

【讨论】：

【解决方案2】：

将“=”按钮的类型更改为“按钮”，即设置类型=按钮。在客户端运行计算后，在“=”按钮上单击页面将提交到服务器。提交后页面会重新加载，这就是您看到结果闪烁一秒钟的原因。

【讨论】：

【解决方案3】：

在标准 HTML 中，表单是一种元素，旨在通过其包含的输入收集数据。默认行为是一旦输入数据并提交表单，浏览器会将所有表单数据发送回服务器（POST 请求）并重新加载响应。这是标准行为。如果要在提交时运行 JS 函数，并在刷新页面时停止，则需要取消默认行为。通常这是通过返回 false 或 e.preventDefault （e 是每个 JS 事件处理程序获取的事件对象）

类似

<form id="calculator" onSubmit="return multiply()">
<input type="number" id="first">
*
<input type="number" id="second">
<input type="submit"> = <span id="answer"></span>
</form>

function multiply(e) {
    var x = document.getElementById("first").value;
    var y = document.getElementById("second").value;
    var z = x * y;
    document.getElementById("answer").innerHTML = z;
    e.preventDefault();
    return false;
}

通常是做什么的。我个人尽量不改变默认行为。如果你不是向服务器发送数据，而只是想做一些 JS 功能，那么你真的不需要表单。类似的东西

HTML：

<input type="number" id="first">
*
<input type="number" id="second">
<button type="button" onclick="multiply()">=</button> = 
<span id="answer"></span>

JavaScript：

function multiply() {
        var x = document.getElementById("first").value;
        var y = document.getElementById("second").value;
        var z = x * y;
        document.getElementById("answer").innerHTML = z;
    }

对我来说更具语义意义。并且更好的是，不要将事件处理程序与您的 HTML 保持一致

 <input type="number" id="first">
    *
    <input type="number" id="second">
    <button id="btnMultiply" type="button">=</button> = 
    <span id="answer"></span>

JavaScript：

document.getElementyId('btnMultiply').addEventListener('click',multiply);

function multiply() {
        var x = document.getElementById("first").value;
        var y = document.getElementById("second").value;
        var z = x * y;
        document.getElementById("answer").innerHTML = z;
    }

【讨论】：