防止在 onsubmit 事件中提交表单答案

【问题标题】：Prevent form submission in the onsubmit event防止在 onsubmit 事件中提交表单
【发布时间】：2016-06-24 18:09:46
【问题描述】：

在我的项目中，我的 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>

并且警报显示状态为成功。

段落内容转为“改变”，但最终又变回原来的“反馈”。那是什么原因呢？

【问题讨论】：

标签： jquery text

【解决方案1】：

这是因为表单的默认行为。它只是在您单击提交按钮时提交。如果你不这样做，那么 ajax 的目的是没有用的。

解决办法是用event.preventDefault ();来停止表单的默认行为：

 onsubmit="myFunction(event)"

现在在函数中使用这个：

function myFunction(e){
    e.preventDefault();// will stop the form submission
    // rest of the code
}

【讨论】：

为我工作，但将 html 上的“事件”一词更改为“e”会返回错误。我不知道为什么

【解决方案2】：

内容没有变回。实际上，表单正在提交，页面本质上正在刷新。

您需要在提交事件上调用.preventDefault(); 来阻止这样的表单提交：

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");
    });
  });
});

【讨论】：

还有一个问题：如果我添加.preventDefault() 的方法，那么$.get 无法工作，服务器端无法获取{name: c} 参数。什么原因？
@baoqger 查看控制台，您是否收到类似evt is undefined 的错误？如果是这样，您可能忘记在function myFunction(evt) { 中添加evt，如果没有此类错误，请将您的代码放入 jsFiddle 并发布链接，以便我查看
我想我在这里犯了一些错误。现在好了。谢谢@DelightedD0D
@baoqger 很高兴你得到了排序，愉快的编码，如果现在解决了，别忘了关闭问题
Re: 或者更好的是，完全放弃表单，将 type="submit" 更改为 type="button"。这是一个糟糕的建议，因为用户将无法再使用他们的 Enter 键提交表单。

【解决方案3】：

如果我们使用提交按钮，则会在页面上进行回发。要解决解决方案，您可以使用以下方法

<input type="button" value="calculate server side" onclick="myFunction()" >

有了这个，你将不必创建一个表单标签

【讨论】：