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

【问题标题】：Prevent form redirect OR refresh on submit?防止表单重定向或刷新提交？
【发布时间】：2010-11-18 19:54:13
【问题描述】：

我翻了一大堆页面都没有找到我的问题，所以我不得不发一个帖子。

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

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

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

【问题讨论】：

标签： javascript jquery html forms

【解决方案1】：

您似乎缺少return false。

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

我记得我知道从提交到不提交可以返回 false 的那一刻也是我开始真正喜欢 Javascript/DOM 系统的那一刻。
太棒了。我在哪里可以找到说明 false 阻止提交的规范文档？
你真的应该使用 e.preventDefault() 而不是仅仅返回 false..
@Juan Not the case 如果你使用的是 JQuery。
@RogerFilmyer 错了。如果你使用“return false;”您还将停止传播，这将导致用户体验问题。例如，如果您希望“点击”会冒泡或类似的东西。

【解决方案3】：

这里：

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

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

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

【讨论】：

$('#contactSend').click(submitClick(e));它对我说'e'没有定义..：/
应该是$('#contactSend').click(function(e) { submitClick(e) }); 或$('#contactSend').click(submitClick);
香草 JS 解决方案怎么样？

【解决方案4】：

另一种解决方案是不使用表单标签并通过 jquery 处理提交按钮上的点击事件。这种方式不会有任何页面刷新，但同时存在一个缺点，即提交的“输入”按钮不起作用，而且在手机上你也不会得到一个开始按钮（某些手机中的一种样式）。所以坚持使用表单标签并使用接受的答案。

【讨论】：

【解决方案5】：

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

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

【讨论】：

+1 用于简单的解决方案。但不幸的是，页面仍然会在用户第一次点击进入时刷新。一个不好的解决方法是尽快致电myForm.submit();，但随后您将加载页面两次。
第一次不会刷新。
这个答案需要被否决，因为它不能解决原来的问题，并且在页面重新加载后通过实际更改 url 使情况变得更糟。您需要在 onsubmit 函数中输入 e.preventDefault() 或 return false。 stackoverflow.com/questions/19454310/…

【解决方案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

由于someone mentioned previously，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

【讨论】：