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

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

来源

2012-03-08 FlyingCat

的形式提交回到同一页面？ – nnnnnn 2012-03-08 03:42:25

你想要类似Ajax的功能吗？ – Simon 2012-03-08 03:45:05

@nnnnnn不，表单会提交到另一个页面，但我有表单验证错误消息，如果表单失败时弹出，当错误消息弹出时，页面将跳转到顶部。我希望页面保持在原来的位置。谢谢。 – FlyingCat 2012-03-08 03:48:06

当您提交表单时，您正在有效地加载新页面。在submit处理程序中返回false将简单地告诉浏览器不要冒泡事件并且不执行默认事件，在这种情况下，它将提交表单，这就是为什么当您这样做时没有任何事情发生。

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

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

以及您的网址是：

host/path?query=querystring#my-form

如果你想避免在重新加载页面，尝试做您的验证在JS。 jQuery验证插件非常易于使用，简直太棒了。请参阅here以了解如何使用它。这很好，因为它为你提供了大部分重要的工作，并且有一套通用的默认验证方法。

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

来源

2012-03-08 03:57:52 Simon

_“在提交处理程序中返回false只是告诉浏览器不要冒泡事件”_ - 返回false取消冒泡_and_取消默认动作（默认动作将提交） – nnnnnn 2012-03-08 03:59:47

是的，现在已修复 – Simon 2012-03-08 04:01:03

@Jerry，您最终使用了哪种解决方案？ – Simon 2012-03-08 04:15:35

尝试在jQuery的使用preventDefault（）方法..

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

来源

2012-03-08 05:33:11 Gopesh

谢谢。但它会阻止我的表单被提交。 +1虽然。 – FlyingCat 2012-03-08 14:25:34

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

回答

相关问题