防止表单提交时浏览器跳转到页面顶部

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>

- FlyingCat

---

表单是否提交回同一页？ - nnnnnn

@nnnnnn 不会，表单将提交到另一个页面，但如果表单失败，我有表单验证错误信息会弹出。当错误信息出现时，页面将跳转到顶部。我想让页面保持原位。谢谢。 - FlyingCat

@Simon，只要没有其他方法，我会尝试你的方法。谢谢。 - FlyingCat

你所说的验证错误信息是全部由JavaScript完成的，还是从服务器返回的？（如果全部由JS完成，则在出现错误时需要返回false。） - nnnnnn

@nnnnnn 这些错误信息是由 CodeIgniter 引擎生成的。现在看来，CodeIgniter 在我提交表单并填充错误消息后重新加载了页面。我想没有办法阻止它。 :( - FlyingCat

Answer 1

当您提交表单时，实际上是在加载一个新页面。在 submit 处理程序中返回 false 只是告诉浏览器不要冒泡事件并且不执行默认事件，在这种情况下默认事件是提交表单，所以当您这样做时没有任何反应。

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

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

你的网址将会是：

host/path?query=querystring#my-form

如果你想避免页面重新加载，可以尝试在JS中进行验证。jQuery验证插件非常易于使用，而且效果非常好。点击这里了解如何使用它。它非常棒，因为它为你做了大部分的繁重工作，并提供了一组常见的默认验证方法。

或者，您可以通过ajax提交表单，并返回服务器捕获的任何验证错误。如果没有错误，则可以重定向到下一个页面。如果有错误，则将其放入表单或显示警报。这种解决方案将避免您在客户端复制任何复杂的验证逻辑（如果要使用jQuery validate插件）。

- Simon

---

在提交处理程序中返回false只是告诉浏览器不要冒泡该事件，同时也取消默认操作（其中默认操作是提交）。 - nnnnnn

@Jerry，你最终使用了哪个解决方案？ - Simon

@Simon。我将首先尝试您的URL片段标识符。由于CodeIgniter为我处理了许多事情，因此我可能会在执行ajax和JS方式时遇到麻烦。 - FlyingCat

Answer 2

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

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

- Gopesh

---

谢谢。但是这样会阻止我的表单被提交。虽然加1。 - FlyingCat

Answer 3

如果在Drupal表单中的jQuery对话框中使用“submit”表单类型（带有＃ajax回调）：

请尝试使用“button”表单类型（同样带有＃ajax回调）。

- Hermann Schwarz