防止表单重定向或在提交时刷新?

I've searched through a bunch of pages, but can't find my problem, so I had to make a post.

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

I have a form that has a submit button, and when submitted I want it to NOT refresh OR redirect. I just want jQuery to perform a function.

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

Here's the form:

形式是这样的:

<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>

And here is the jQuery:

这是jQuery

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

I've tried with and without an action element on the form, but don't know what I'm doing wrong. What has annoyed me more is that I have an example that does it perfectly: Example Page

我尝试过在表单上使用和不使用动作元素，但是不知道我做错了什么。更让我恼火的是我有一个完美的例子:示例页面

If you want to see my problem live, goto stormink.net (my site) and check out the sidebar where it says "Send me and email" and "RSS Subscription". Both are forms that I'm trying to get this to work on.

如果你想看到我的问题，去stormink.net(我的网站)，看看它说的“发送我和电子邮件”和“RSS订阅”的侧边栏。这两种形式都是我想要解决的。

6 个解决方案

#1

160

Just handle the form submission on the submit event, and return false:

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

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

You don't need any more the onclick event on the submit button:

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

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

#2

Here:

在这里:

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

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

Instead of using the onClick event, you'll use bind an 'click' event handler using jQuery to the submit button (or whatever button), which will take submitClick as a callback. We pass the event to the callback to call preventDefault, which is what will prevent the click from submitting the form.

与使用onClick事件不同，您将使用jQuery的“单击”事件处理程序将其绑定到提交按钮(或任何按钮)，它将以submitClick作为回调。我们将事件传递给回调以调用preventDefault，这将阻止单击提交表单。

#3

It looks like you're missing a return false.

看起来你错过了一个返回假。

#4

In the opening tag of your form, set an action attribute like so:

在表单的开始标记中，设置如下操作属性:

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

#5

An alternative solution would be to not use form tag and handle click event on submit button through jquery. This way there wont be any page refresh but at the same time there is a downside that "enter" button for submission wont work and also on mobiles you wont get a go button( a style in some mobiles). So stick to use of form tag and use the accepted answer.

另一种解决方案是不使用表单标记，通过jquery处理提交按钮上的单击事件。这样就不会有任何页面刷新，但同时也有一个缺点:提交的“输入”按钮不能工作，在移动设备上也不能有go按钮(在某些移动设备上是这样的)。因此，坚持使用表单标签并使用公认的答案。

#6

If you want to see the default browser errors being displayed, for example, those triggered by HTML attributes (showing up before any client-code JS treatment):

如果您希望看到默认浏览器错误被显示，例如HTML属性触发的错误(在任何客户端代码JS处理之前显示):

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

You should use the submit event instead of the click event. In this case a popup will be automatically displayed requesting "Please fill out this field". Even with preventDefault:

您应该使用提交事件而不是单击事件。在这种情况下，弹出窗口将自动显示，请求“请填写此字段”。即使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

As someone mentioned previously, return false would stop propagation (i.e. if there are more handlers attached to the form submission, they would not be executed), but, in this case, the action triggered by the browser will always execute first. Even with a return false at the end.

正如前面提到的，return false将停止传播(例如，如果表单提交附加了更多的处理程序，那么它们将不会被执行)，但是，在这种情况下，浏览器触发的操作总是首先执行。即使最后返回为false。

So if you want to get rid of these default pop-ups, use the click event on the submit button:

因此，如果您想要摆脱这些默认弹出窗口，请在提交按钮上使用单击事件:

$('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

#1

160