防止表单redirect或刷新提交？

我search了一堆页面，但找不到我的问题，所以我不得不发表一个post。

我有一个提交button的表单，并提交时，我希望它不刷新或redirect。 我只是想让jQuery执行一个function。

这里是表格：

<form id="contactForm"> <fieldset> <label for="Name">Name</label> <input id="contactName" type="text" /> </fieldset> <fieldset> <label for="Email">Email</label> <input id="contactEmail" type="text" /> </fieldset> <fieldset class="noHeight"> <textarea id="contactMessage" cols="20"></textarea> <input id="contactSend" class="submit" type="submit" onclick="sendContactForm()" /> </fieldset> </form> <small id="messageSent">Your message has been sent.</small> 

这里是jQuery：

 function sendContactForm(){ $("#messageSent").slideDown("slow"); setTimeout('$("#messageSent").slideUp();$("#contactForm").slideUp("slow")', 2000); } 

我已经尝试过，没有在表单上的动作元素，但不知道我做错了什么。 让我更生气的是我有一个完美的例子： 例子页

如果你想看到我的问题现场，goto stormink.net （我的网站），并检查了它说“发送我和电子邮件”和“RSS订阅”的边栏。 两者都是我试图让这个工作的forms。

Answer 1

只需处理提交事件的表单提交，并返回false：

 $('#contactForm').submit(function () { sendContactForm(); return false; }); 

您不需要在提交button上更多的onclick事件：

 <input class="submit" type="submit" value="Send" /> 

Answer 2

这里：

 function submitClick(e) { e.preventDefault(); $("#messageSent").slideDown("slow"); setTimeout('$("#messageSent").slideUp(); $("#contactForm").slideUp("slow")', 2000); } $(document).ready(function() { $('#contactSend').click(submitClick); }); 

而不是使用onClick事件，你将使用绑定“click”事件处理程序使用jQuery到提交button（或任何button），这将采取submitClick作为callback。 我们将事件传递给callback来调用preventDefault ，这将阻止点击提交表单。

Answer 3

看起来你错过了一个return false 。

Answer 4

在窗体的开始标记中，设置一个action属性，如下所示：

 <form id="contactForm" action="#"> 

Answer 5

另一种解决scheme是不使用表单标签，并通过jQuery处理提交button上的点击事件。 这样就不会有任何页面刷新，但在同一时间有一个缺点，“提交”button不会工作，也在手机上，你不会得到一个去button（一些手机的风格）。 所以坚持使用表单标签并使用接受的答案。