防止表单重定向或刷新提交？

Question

我已经搜索了一堆页面，但找不到我的问题，所以我不得不发表一个帖子。

我有一个带有提交按钮的表单，提交时我希望它不刷新或重定向。我只想让 jQuery 执行一个功能。

这是表格：

 <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);
 }

我已经尝试过在表单上使用和不使用操作元素，但不知道我做错了什么。更让我恼火的是，我有一个例子可以完美地做到这一点：

示例页面

如果您想实时查看我的问题，请转到 stormink.net （我的网站）并查看侧边栏，其中显示“向我发送电子邮件”和“RSS 订阅”。两者都是我试图让它发挥作用的形式。

原文由 Ian Storm Taylor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

您不再需要提交按钮上的 onclick 事件：

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

原文由 Christian C. Salvadó 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

这里：

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

$(document).ready(function() {
    $('#contactSend').click(submitClick);
});

您将使用 jQuery 将“点击”事件处理程序绑定到提交按钮（或任何按钮），而不是使用 onClick 事件，这会将 submitClick 作为回调。我们将事件传递给回调以调用 preventDefault ，这将阻止点击提交表单。

原文由 karim79 发布，翻译遵循 CC BY-SA 3.0 许可协议