jquery 提交时是否阻止表单重定向或刷新？

h5qlskok 于 2022-11-03 发布在 jQuery

关注(0)|答案(7)|浏览(210)

我已经搜索了一堆页面，但找不到我的问题，所以我不得不发表一个帖子。
我有一个表单，它有一个提交按钮，当提交时，我不希望它刷新或重定向。我只希望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);
}

我尝试过在表单上使用和不使用action元素，但不知道我做错了什么。更让我恼火的是，我有一个例子可以完美地做到这一点：示例页面
如果你想看到我的问题现场，后藤stormink.net（我的网站），并检查了侧边栏，它说：“发送我和电子邮件”和“RSS订阅”。

jquery

来源：https://stackoverflow.com/questions/1263852/prevent-form-redirect-or-refresh-on-submit

7条答案

按热度按时间

qjp7pelc1#

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

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

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

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

赞(0）回复(0）举报 2022-11-03

6g8kf2rb2#

在这里：

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

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

我们不使用onClick事件，而是使用jQuery将'click'事件处理程序绑定到submit按钮（或其他按钮），这将把submitClick作为回调函数。我们将事件传递给回调函数以调用preventDefault，这将阻止单击提交表单。

赞(0）回复(0）举报 2022-11-03

ljo96ir53#

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

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

赞(0）回复(0）举报 2022-11-03

3ks5zfa04#

看起来您缺少一个return false。

赞(0）回复(0）举报 2022-11-03

vaj7vani5#

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

赞(0）回复(0）举报 2022-11-03

amrnrhlw6#

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

赞(0）回复(0）举报 2022-11-03

myss37ts7#

与前面的大多数答案不同，下面的解决方案演示了如何使用纯Javascript**（而不是JQuery）防止页面在<form>提交时刷新/重定向**。

HTML表单

不需要submit按钮上的onclick事件（使用者使用鼠标器按一下按钮时会引发）或onsubmit事件（使用者按下Enter键时会引发）。

<form id="myForm">
   <input type="text" name="contactName" id="contactName">
   <input class="submit" type="submit" value="Submit">
</form>

Javascript代码

下面是在submit event上处理form提交的Javascript代码。Event接口的preventDefault()方法告诉user agent，如果事件没有得到显式处理，则不应采取通常会采取的默认操作。

注意：请确保在将HTML元素添加到DOM树之后注册事件处理程序;否则，将导致运行时错误，因为您将尝试设置属性（事件行程常式）。确保这一点的一个方法是将指令码放在有问题的项目之后（即<form>）、但这可能有点危险-因为您依赖于假设的浏览器工作方式-您可以在初始HTML文档完全加载和解析后，使用DOMContentLoaded事件分配事件处理程序。示例：

document.addEventListener('DOMContentLoaded', (event) => {
    document.getElementById("myForm").addEventListener("submit", function(e) {
        e.preventDefault() // Cancel the default action
        sendContactForm();
    });
});

一起来

<!DOCTYPE html>
<html>
   <head>
      <script>
         document.addEventListener('DOMContentLoaded', (event) => {
             document.getElementById("myForm").addEventListener("submit", function(e) {
                 e.preventDefault() // Cancel the default action
                 sendContactForm();
             });
         });
      </script>
   </head>
   <body>
      <form id="myForm">
         <input type="text" name="contactName" id="contactName">
         <input class="submit" type="submit" value="Submit">
      </form>
   </body>
</html>

赞(0）回复(0）举报 2022-11-03

我来回答

jquery 提交时是否阻止表单重定向或刷新？

7条答案

HTML表单

Javascript代码

相关问题

热门标签

最新问答