带有简单表单的网页在表单提交时重新加载答案

【问题标题】：Webpage with a simple form reloads on form submission带有简单表单的网页在表单提交时重新加载
【发布时间】：2023-04-01 12:14:01
【问题描述】：

我有一个简单的 HTML 表单，正在使用 JavaScript 向网页显示输入的值，但每次点击提交时，网页都会重新加载。

我已经阅读了Webpage reloading on submitting form 的问题，但那是 jQuery，e.preventDefault(); 在我的情况下不起作用。如何阻止页面重新加载？

我有以下代码：

function myFunction() {
  var pm1, sqrtInt, pm2, constInt;

  pm1 = document.getElementById("pm1").value;
  pm1 = document.getElementById("sqrtInt").value;
  pm1 = document.getElementById("pm2").value;
  pm1 = document.getElementById("constInt").value;

  document.getElementById("proof").innerHTML = 
      '<br>pm1 = ' + pm1 + 
      '<br>sqrtInt = ' + sqrtInt + 
      '<br>pm2 = ' + pm2 + 
      '<br>constInt = ' + constInt;
}

#proof {
  background: black;
  color: yellow;
  width: 100%;
  height: 20%;
}

<div>Form Trial</div>
<div>
  <form onsubmit="myFunction()">
    <div>
      <select class="uk-select" id="pm1">
        <option>Minus (-)</option>
        <option>Plus (+)</option>
      </select>
    </div>
    <div>
      <input class="uk-input" type="text" placeholder="Square Root" id='sqrtInt'>
    </div>
    <div>
      <select id="pm2">
        <option>Minus (-)</option>
        <option>Plus (+)</option>
      </select>
    </div>
    <div>
      <input type="text" placeholder="Constant" id='constInt'>
    </div>
    <div>
      <input type="submit" value='submit'>
    </div>
  </form>
</div><br><br>
<div id="proof"></div>

【问题讨论】：

标签： javascript html

【解决方案1】：

要做两件事：

将return 添加到onsubmit 代码：
```
<form onsubmit="return myFunction()">
```
在myFunction 函数的末尾添加：
```
return false;
```

function myFunction() {
  var pm1, sqrtInt, pm2, constInt;

  pm1 = document.getElementById("pm1").value;
  pm1 = document.getElementById("sqrtInt").value;
  pm1 = document.getElementById("pm2").value;
  pm1 = document.getElementById("constInt").value;

  document.getElementById("proof").innerHTML = 
      '<br>pm1 = ' + pm1 + 
      '<br>sqrtInt = ' + sqrtInt + 
      '<br>pm2 = ' + pm2 + 
      '<br>constInt = ' + constInt;
  return false; // <---------
}

#proof {
  background: black;
  color: yellow;
  width: 100%;
  height: 20%;
}

<div>Form Trial</div>
<div>
  <form onsubmit="return myFunction()">
    <div>
      <select class="uk-select" id="pm1">
        <option>Minus (-)</option>
        <option>Plus (+)</option>
      </select>
    </div>
    <div>
      <input class="uk-input" type="text" placeholder="Square Root" id='sqrtInt'>
    </div>
    <div>
      <select id="pm2">
        <option>Minus (-)</option>
        <option>Plus (+)</option>
      </select>
    </div>
    <div>
      <input type="text" placeholder="Constant" id='constInt'>
    </div>
    <div>
      <input type="submit" value='submit'>
    </div>
  </form>
</div><br><br>
<div id="proof"></div>

【讨论】：