html - 如何阻止我的表单在提交时重新加载？

Question

当我提交此表单时，我可以看到它已正确提交，但它总是重新加载并且我丢失了我的进度。

<form id="edpiForm" action="#" method="POST" name="edpiForm">

<div id="div-dpi">
<label for="dpi">Dpi: </label>
<input type="number" name="dpi" id="dpi" class="input">
</div>


<div id="div-sens">
<label for="sens">Sensitivity: </label>
<input type="number" name="sens" id="sens" class="input" step="any" >
</div>

<div id="button">
<button id="submitbutton" name="button" onclick="function()">Calculate</button>
</div>

</form>

标签： htmlforms

Answer 1

简单地改变

<button id="submitbutton" name="button" onclick="function()">Calculate</button>

到

<button type="submit">Calculate</button>

JS代码：

document.querySelector('#edpiForm').onsubmit = evt =>
  {
  evt.preventDefault() // disable submit

  // code for your calculate button
  // ...
  }