jquery 在onsubmit事件中阻止表单提交

cbjzeqam 于 2023-02-12 发布在 jQuery

关注(0)|答案(3)|浏览(207)

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

来源：https://stackoverflow.com/questions/35907329/prevent-form-submission-in-the-onsubmit-event

3条答案

按热度按时间

mm5n2pyu1#

内容并没有"变回"，实际上，表单正在提交，页面也在刷新。
您需要在submit事件上调用.preventDefault();来防止表单提交，如下所示：

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

  // ... other code
};

或者更好的方法是，完全抛弃窗体，将type="submit"更改为type="button"，然后将一个事件处理程序附加到按钮，如下所示：
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-02-12

ruoxqz4g2#

这是因为表单的默认行为，当你点击提交按钮的时候它就被提交了，如果你不这样做，那么 AJAX 的作用就没有用了。
解决方案是使用event.preventDefault ();停止窗体的默认行为：

onsubmit="myFunction(event)"

现在在函数中使用此函数：

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

赞(0）回复(0）举报 2023-02-12

f87krz0w3#

如果我们使用提交按钮，那么回发会发生在页面上。

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

这样，您就不必创建表单标记

赞(0）回复(0）举报 2023-02-12

我来回答

jquery 在onsubmit事件中阻止表单提交

3条答案

相关问题

热门标签

最新问答