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

新手上路,请多包涵

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

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

原文由 Ian Storm Taylor 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 550
2 个回答

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

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

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

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

原文由 Christian C. Salvadó 发布,翻译遵循 CC BY-SA 2.5 许可协议

如果您想查看显示的默认浏览器错误,例如由 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

原文由 CPHPython 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题