阻止表单重定向还是在提交时刷新？

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

我有一个带有提交按钮的表单，提交后我不希望它刷新或重定向。我只希望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);
}

我尝试过在表单上包含和不包含action元素，但是不知道我在做什么错。更让我烦恼的是，我有一个完美的例子： 示例页面

如果您想实时查看我的问题，请转到stormink.net（我的网站），并在侧边栏显示“向我发送电子邮件”和“ RSS订阅”。两者都是我正在尝试使之工作的形式。

只需处理Submit事件中的表单提交，然后返回false：

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

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

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

这里：

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

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

代替使用onClick事件，您将使用jQuery将“ click”事件处理程序绑定到jQuery的Submit按钮（或任何按钮）上，这将以commitClick作为回调。我们将该事件传递给回调函数，以调用preventDefault，这将阻止单击提交表单。

在表单的开始标签中，设置一个action属性，如下所示：

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

看来您想念一个return false。

如果要查看显示的默认浏览器错误，例如由HTML属性触发的错误（显示在任何客户端代码JS处理之前）：

<input name="o" required="required" aria-required="true" type="text">

您应该使用submit事件而不是click事件。在这种情况下，将自动显示一个弹出窗口，要求“ 请填写此字段 ”。即使preventDefault：

$('form').on('submit', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will show up a "Please fill out this field" pop-up before my_form_treatment

正如有人前面所提到的，return false将停止传播（即，如果有附加到表单提交更多的处理程序，他们就不会被执行），但是，在这种情况下，由浏览器触发的动作总是会首先执行。即使以a return false结尾。

因此，如果您想摆脱这些默认弹出窗口，请使用click“提交”按钮上的事件：

$('form input[type=submit]').on('click', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will NOT show any popups related to HTML attributes

另一种解决方案是不使用表单标签，而是通过jquery处理提交按钮上的click事件。这样，将不会刷新任何页面，但同时存在一个缺点，即“输入”提交按钮将无法工作，并且在移动设备上，您将不会获得“执行”按钮（某些移动设备中的样式）。因此，请坚持使用表单标签并使用可接受的答案。