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

【问题标题】：Prevent browser jump to top page when submit the form提交表单时防止浏览器跳转到首页
【发布时间】：2012-03-25 15:15:10
【问题描述】：

我试图防止用户提交表单时页面跳转到顶部。有很多人建议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>

【问题讨论】：

表单是否提交回同一页面？
你想要类似 ajax 的功能吗？
@nnnnnn 不，表单将提交到另一个页面，但是如果表单失败，我会弹出表单验证错误消息，当错误消息弹出时页面将跳转到顶部。我希望页面保持原样。谢谢。
@Simon，只要没有别的办法，我就试试你的办法。谢谢。
杰瑞，请尝试更新您的问题和示例代码，以更具体地解决您关于错误验证的问题。如果您要重新加载页面，“跳转”是不可避免的。我会接受@Simon 对此的建议并使用 AJAX

标签： jquery html forms

【解决方案1】：

当您提交表单时，您实际上是在加载一个新页面。在 submit 处理程序中返回 false 只是告诉浏览器不要冒泡事件并且不执行默认事件，在这种情况下是提交表单，这就是为什么当你这样做时什么都没有发生的原因。

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

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

你的网址是：

host/path?query=querystring#my-form

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

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

【讨论】：

“在提交处理程序中返回 false 只是告诉浏览器不要冒泡事件” - 返回 false 取消冒泡并且取消默认操作（默认操作是提交）。
@Jerry，您最终使用了哪种解决方案？
@西蒙。我将首先尝试您的 url 片段标识符。由于 codeigniter 为我处理了很多事情，所以我在使用 ajax 和 JS 方式时可能会遇到麻烦。

【解决方案2】：

尝试在 jquery 中使用 preventDefault() ..

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

【讨论】：

谢谢。但它也会阻止我的表单提交。 +1 虽然。

【解决方案3】：

如果在 drupal 表单的 jQuery 对话框中使用“提交”表单类型（带有 #ajax 回调）：

尝试使用“按钮”表单类型（也可以使用#ajax 回调）。

【讨论】：