防止在onsubmit事件中提交表单

Chris Bao 发表于 Dev

Chris Bao

在我的项目中，我具有如下的JS和HTML代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>

function myFunction() {
    //document.getElementById('demo').innerHTML = Date();
    alert("done");
    var a = parseInt(document.getElementById('number1').value);
    var b = parseInt(document.getElementById('number2').value);
    var c = a + b;
    $.get('/_add_numbers',{number: c}, function(data,status){
        res = JSON.parse(data);
        alert(status);
        $("#feedback").text("change");
        alert("show");
    });
};

</script>
</head>
<body>
<h1>My First JavaScript V2</h1>
<p id="demo"></p>
<form onsubmit="myFunction()">
    <input type="text" size="5" name="a" id = "number1"> +
    <input type="text" size="5" name="b" id = "number2"> =
    <span id="result">?</span>
    <br>
    <input type="submit" value="calculate server side" >
</form>
<p id="feedback">feedback</p>
</body>
</html>

警报显示状态为成功。

该段的内容变为“更改”，但最终更改为原始的“反馈”。那是什么原因呢？

韦斯利·史密斯

内容没有变回原样。实际上，正在提交表单，并且实质上是在刷新页面。

您需要调用.preventDefault();Submit事件以防止表单提交，如下所示：

function myFunction(evt) { 
  evt.preventDefault();

  // ... other code
};

或者更好的是，完全放弃表单，将更type="submit"改为type="button"，然后将事件处理程序附加到按钮，如下所示：

<body>
  <h1>My First JavaScript V2</h1>
  <p id="demo"></p>
  <input type="text" size="5" name="a" id="number1"> +
  <input type="text" size="5" name="b" id="number2"> =
  <span id="result">?</span>
  <br>
  <input type="button" class="calculate" value="calculate server side">
  <p id="feedback">feedback</p>
</body>


$(function() {
  $('.calculate').click(function() {
    alert("done");
    var a = parseInt(document.getElementById('number1').value);
    var b = parseInt(document.getElementById('number2').value);
    var c = a + b;
    $.get('/_add_numbers', {
      number: c
    }, function(data, status) {
      res = JSON.parse(data);
      alert(status);
      $("#feedback").text("change");
      alert("show");
    });
  });
});