防止形式重定向或刷新提交？(Prevent form redirect OR refresh on

我已经通过了一堆网页搜查，但找不到我的问题，所以我不得不做出一个职位。

我有了一个提交按钮形式，并提交时，我希望它不会刷新或重定向。 我只是想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订阅”。 两者都是我试图得到这个工作形式。

Answer 1:

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

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

你不需要任何更多的提交按钮的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事件中，您将使用绑定使用jQuery提交按钮（或其他按钮），这将需要submitClick作为回调的“click”事件处理程序。 我们该事件传递给回调调用了preventDefault ，这是什么会阻止点击提交表单。

Answer 3:

在表单的开始标记，设置一个action属性，像这样：

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

Answer 4:

它看起来像你缺少一个return false 。

Answer 5:

另一种解决办法是不使用表单标签和处理通过点选jQuery的提交按钮事件。 这样不会有任意页面刷新，但同时存在着“进入”按钮，提交不会工作，并在手机上，你不会得到一个去按钮（在某些手机样式）不利的一面。 所以坚持使用形式的标签和使用接受的答案。

Answer 6:

如果你想看到所显示的默认浏览器的错误 ，例如，那些由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将停止传播（即，如果有附加到表单提交更多的处理程序，他们就不会被执行），但是，在这种情况下，由浏览器触发的动作总是会首先执行。 即使有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

文章来源: Prevent form redirect OR refresh on submit?