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

尝试在jquery中使用preventDefault（）..

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

Answer 2

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

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

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

你的网址是：

host/path?query=querystring#my-form

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

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

Answer 3

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

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

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

3 个答案: