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

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>

您的网址将是:

host/path?query=querystring#my-form

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

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