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

IT技术 javascript jquery html forms
2021-02-01 05:12:20

我已经搜索了一堆页面，但找不到我的问题，所以我不得不发帖。

我有一个带有提交按钮的表单，提交时我希望它不刷新或重定向。我只是想让 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 订阅”。两者都是我试图让它发挥作用的形式。

6个回答

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

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

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

<input class="submit" type="submit" value="Send" />
惊人。我在哪里可以找到说明false阻止提交的规范文档？
2021-03-14 05:12:20
你真的应该使用 e.preventDefault() 而不是仅仅返回 false ..
2021-03-21 05:12:20
@Juan如果您使用的是 JQuery，则情况并非如此 。
2021-03-23 05:12:20
@RogerFilmyer 错了。如果你使用“返回假；” 你也在停止传播，这会导致用户体验问题。例如，如果您期望“点击”冒泡或类似的东西。
2021-04-02 05:12:20
我记得当我了解到可以从提交返回 false 到不提交的那一刻也是我开始真正喜欢 Javascript/DOM 系统的那一刻。
2021-04-11 05:12:20

这里：

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(function(e) { submitClick(e) });或$('#contactSend').click(submitClick);
2021-03-15 05:12:20
$('#contactSend').click(submitClick(e)); 它对我说'e'没有定义..：/
2021-03-30 05:12:20

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

<form id="contactForm" action="#">
+1 为简单的解决方案。但不幸的是页面仍会在用户第一次点击进入时刷新。一个糟糕的解决方法是尽快调用myForm.submit();，但随后您加载了页面两次。
2021-03-15 05:12:20
第一次不会刷新。
2021-03-21 05:12:20
这个答案需要被否决，因为它没有解决原始问题，并且在页面重新加载后实际更改 url 使情况变得更糟。您需要在 onsubmit 函数中使用e.preventDefault()或 in return false。stackoverflow.com/questions/19454310/...
2021-03-23 05:12:20

看起来您缺少一个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将停止传播（即如果有更多的处理程序附加到表单提交，它们将不会被执行），但是，在这种情况下，浏览器触发的操作将始终首先执行。即使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
其它你可能感兴趣的问题
上一篇无法验证叶子签名 下一篇包含不区分大小写