防止浏览器在提交表单时跳转到首页

Question

当用户提交表单时，我试图防止页面跳转到顶部。有很多人建议使用return false。但是，它也会阻止表单的提交。

我想知道有没有人能帮我一下。

**JQuery**

$('#submit').click(function(){ //doesn't work
    return false;
})

$('form').submit(function(){  //doesn't work either
    return false;       
})



**Html**
<form...>
<input>...
<input>...
<input>...

<input type='submit' id='submit' value='submit'>

</form>

Answer 1

当您提交表单时，您实际上加载了一个新页面。在submit处理程序中返回false只是告诉浏览器不要冒泡事件，也不要执行默认事件，在本例中是提交表单，这就是为什么在执行此操作时没有发生任何事情。

有几种方法可以解决你的问题。如果您将用户(在表单提交后)重定向回表单页面，但出现错误，您可以在url中包含“片段标识符”。让片段标识符指向表单的ID，浏览器将自动转到文档的该部分。示例：

<form id="my-form">
    ...
</form>

您的url将是：

host/path?query=querystring#my-form

如果您希望避免页面重新加载，请尝试在JS中进行验证。jQuery验证插件非常容易使用，而且非常棒。查看here以了解如何使用它。它很棒，因为它为您完成了大部分繁重的工作，并且具有一组通用的、默认的验证方法。

或者，您可以通过ajax提交表单，并返回服务器接收到的任何验证错误。如果你没有任何错误，那么你可以重定向到下一页。如果有错误，则将它们粘贴到窗体中或显示一个警告。此解决方案将避免您必须在客户端复制任何复杂的验证逻辑(如果您想要使用jQuery验证插件)。

Answer 2

尝试在jquery中使用preventDefault()。

$('#submit').click(function(e){ 
    e.preventDefault();
});

Answer 3

如果在drupal表单的jQuery对话框中使用'submit‘表单类型(带有#ajax回调)：

尝试使用'button‘表单类型(也可以使用#ajax回调)。