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

我已尝试在表单上使用和不使用操作元素，但不知道我做错了什么。令我恼火的是，我有一个完美的例子： Example Page

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

Answer 1

只需处理submit事件的表单提交，然后返回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将“click”事件处理程序绑定到提交按钮（或任何按钮），这将使submitClick作为回调。我们将事件传递给回调以调用preventDefault，这将阻止点击提交表单。

Answer 3

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

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

Answer 4

看起来你错过了return false。

Answer 5

另一种解决方案是不使用表单标记并通过jquery处理提交按钮上的click事件。这种方式不会有任何页面刷新，但同时有一个缺点，即＃34;输入＆＃34;提交按钮不会工作，也在手机上你不会得到一个按钮（一些手机的风格）。所以坚持使用表单标签并使用接受的答案。

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

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

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

6 个答案: