Question

我想阻止使用jQuery提交表单，而是在用户想要提交时运行一个函数。

这是我的表单标记：

<form action="" method="post" id="msg-form">
    <p><textarea name="msg"></textarea><input type="submit" value="Send"></p>
</form>

我的Javascript代码：

$('#msg-form').submit(function() {
    return false;
}

但是，当我按下提交按钮时，表单仍然会被发送并且页面会刷新。如何正确阻止表单提交？

Answer 1

submit事件实际上并未绑定到表单元素。在加载DOM之后，您可能忘记了绑定它！

将事件绑定放在$(document).ready(function() {内或在页面底部加载脚本（在加载所有元素之后）。

Answer 2

似乎事件处理程序甚至没有执行，因此我假设找不到表单。尝试将代码封装在DOM准备就绪时执行的处理程序中。在jQuery中，它可以简单地完成：

$(function(){
    $('#msg-form').submit(function(event) {
        event.preventDefault();
        // code executed when user tries to submit the form
    });
});

另外，如上所示，您可以在提交表单时阻止表单的默认行为。

Answer 3

$('#msg-form').submit(function(e){ e.preventDefault(); });

Answer 4

您无法为用户提供真实的提交按钮，只能在验证后使用JS提交表单：

<强> HTML

<form action="" method="post" id="msg-form">
    <p><textarea name="msg"></textarea><input id="submit" type="button" value="Send"></p>
</form>

<强> JS

$('#submit').on('click', function() {
    // validate
    $('#msg-form')[0].submit();
});

Answer 5

尝试：

$("#msg-form").submit(function (e) {
    e.preventDefault();
});

Answer 6

这有效

<form action='' onsubmit="return false;">

就像这样

<form action='' onsubmit="doSomeWork();return false;">

jQuery没有阻止提交表单

6 个答案: