jQuery没有阻止提交表单

时间:2012-01-04 19:25:27

标签: javascript jquery forms

我想阻止使用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;
}

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

6 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

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

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

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

您无法为用户提供真实的提交按钮,只能在验证后使用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();
});

答案 4 :(得分:0)

尝试:

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

答案 5 :(得分:0)

这有效

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

就像这样

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