通过 event.preventDefault() 阻止表单提交；不工作

Question

我正在使用 jQuery 提交表单变量，并且我试图阻止表单通过通常的方式提交（单击“提交”按钮或在其中一个字段上按 Enter 键）

我有这个：

$('#form').submit(function(){
    event.preventDefault();
});

但它似乎不起作用我的表单仍在提交，转到 process.php 页面..

Answer 1

如果您唯一需要做的就是防止默认操作，您可以提供

false

而不是函数：

$('#form').submit(false);

Answer 2

我无法获得发布的工作答案，并且仅提供错误对我来说不是一个选择。我发现这很有效：

$(document).on('submit', '#form', function(event){
    event.preventDefault();
});

Answer 3

尝试使用

return false

而不是

event.preventDefault()

或接受

event

作为函数的参数。

$('#form').submit(function(event){
  event.preventDefault();
});

不确定为什么有些人认为这不再有效，但这里有一个示例表明它仍然有效。

https://jsfiddle.net/138z5atq/

注释掉事件处理程序，它就会发出警报。

关于

stopPropagation()

和

stopImmediatePropagation()

它们根本不会阻止表单提交。他们只是阻止事件在 dom 中冒泡。

Answer 4

其他方式是：

$('#form').submit(function(){

   //some code here

   return false;
});

Answer 5

为了扩展 steveukx 的答案，我通常喜欢做这样的事情：

$('#form').submit(function(event){

    // The method's values go here

    event.preventDefault();

}, false); // This is a boolean (It converts all the values contained in the callback to a boolean value)

Answer 6

我还注意到（至少在 Chrome 上），如果你在 Promise 或这样的异步函数之后运行 e.preventDefault() ：

submitEvent(e) {

    this.sendData(formData).then((json) => {
        ...
    })
    .catch((error) => {
        ...
    });

    e.preventDefault(); // OPS. Executed but not working ????!!!
}

前一个不起作用。理想情况下，您必须在任何其他类似这样的代码之前声明它：

submitEvent(e) {

    e.preventDefault(); // WORKING !! :-)

    this.sendData(formData).then((json) => {
        ...
    })
    .catch((error) => {
        ...
    });
}

Answer 7

正如 Damian Czapiewski 在评论中指出的那样：

也许您在通过 DOM 访问表单之前引用了该表单。将代码放在 onload 回调中，并将事件参数传递给提交事件的回调。

我的问题确实是由于在我的表格可用之前尝试引用它而引起的。在 jQuery 就绪检查中移动我的调用导致了 PreventDefault() 工作。

$(document).ready(function(){
    $("#submitForm").submit(function(e) {
        console.log("Submitted")
        e.preventDefault(); // avoid to execute the actual submit of the form.    
    });
})

Answer 8

就我而言，

preventDefault

不起作用，因为我包含一个表单的模式位于另一个表单内。所以，实际上，它是一个形式中的一个形式。

我通过使用反应门户修复了它。