jquery 防止表单通过event.preventDefault()提交;不起作用

9wbgstp7  于 12个月前  发布在  jQuery
关注(0)|答案(8)|浏览(203)

我使用jQuery提交我的表单变量,我试图阻止通过通常的方式提交表单(单击提交按钮或按下其中一个字段上的回车键)
我有这个:

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

字符串
但它似乎不工作我的表单仍然提交,去process.php页面..

ikfrs5lh

ikfrs5lh1#

如果你需要做的只是防止默认操作,你可以提供false而不是函数:

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

字符串

enxuqcxy

enxuqcxy2#

我无法让张贴的答案工作,只有提供假不是我的选择.我发现这工作:

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

字符串

qij5mzcb

qij5mzcb3#

尝试使用return false代替event.preventDefault(),或者接受event作为函数的参数。

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

字符串
不知道为什么有些人认为这不再工作,但这里有一个例子表明它仍然工作。
https://jsfiddle.net/138z5atq/
注解掉事件处理程序,它将发出警报。
对于stopPropagation()stopImmediatePropagation(),它们根本不会阻止表单提交,只是阻止事件在dom中冒泡。

s1ag04yj

s1ag04yj4#

另一种方法是:

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

   //some code here

   return false;
});

字符串

hrirmatl

hrirmatl5#

为了扩展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)

字符串

mkshixfv

mkshixfv6#

我还注意到(至少在Chrome上),如果你在一个Promise或一个异步函数之后运行e.preventDefault(),像这样:

submitEvent(e) {

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

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

字符串
这个previous不起作用。你必须在任何其他代码之前声明它,像这样:

submitEvent(e) {

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

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

v7pvogib

v7pvogib7#

正如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.    
    });
})

字符串

m1m5dgzv

m1m5dgzv8#

在我的例子中,preventDefault没有工作,因为我的包含表单的模型在另一个表单中。所以,实际上,它是表单中的表单。
我用react portals修复了它。

相关问题