避免在我的表格JQuery中重复提交

Avoid double submit in my form JQuery

本文关键字：提交 JQuery 表格 我的      更新时间：2023-09-26

JSfiddle ： CODE

我试图用 POST 发送信息;然后我添加了此代码以在提交一次后禁用该按钮：

    $('form').submit(function(){
        $('input[type=submit]', this).attr('disabled', 'disabled');
        return true;
    });

但现在：按钮被禁用，页面被重新加载，但表格没有提交信息......请提供任何解决方案

PS：我需要像上面的代码这样的通用解决方案，我的表单没有id，因为我需要将此功能应用于我的所有表单....

您正在将事件传递到该处理程序函数中。如果您使用 .ajax() POST 请求提交表单（考虑使用 .post() ），则需要防止默认行为（即提交表单）。

$("form").on("submit", function(e){
  e.preventDefault();
  // Send the form data using .ajax() or .post()
});

如果有人（例如几周前的我）建议将return false放在函数的末尾，请让他们参考文章 jQuery 事件：停止（错误）使用 return False（近两年前）。

当使用 AJAX 发送表单以及作为常规表单提交时，上述内容会有所帮助。但是，您的问题似乎是两次点击提交按钮（意外或故意）。正如您在回答中指出的那样，解决方案是在短（人类）/长时间（计算机）后停用按钮，正如BalusC在他的回答中指出的那样：

$(document).ready(function () {
    $("form").submit(function () {
        setTimeout(function () {
            $('input[type=submit]').attr('disabled', 'disabled');
        }, 50);
    });
});

这解决了我的问题：https://stackoverflow.com/a/2830812/1436998

$(document).ready(function(){
    $("form").submit(function(){
        setTimeout(function() {
            $('input').attr('disabled', 'disabled');
            $('a').attr('disabled', 'disabled');
        }, 50);
    })
});

您也可以使用

$（"form"）.beforeSubmit（function（）{//function body here.... }）;

我遇到了无法抗拒两次或三次或多次点击的人的问题。这可能会给您带来各种问题。这就是我使用 Jquery 解决多个提交的方式。如果它可以帮助您，请随时复制它。复制并粘贴以进行测试。如果需要，可以疯狂地点击。此表格只提交一次！

<%@LANGUAGE="VBSCRIPT"%>
<%Option Explicit%>
<!DOCTYPE html>
 <html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style type="text/css">
   body{
        height:100%;
        width:100%;
       }
    h2 {
        font-family:sans-serif;
        font-style:italic;
        font-size:1.4em;
        color:#777;
    }
    #tekst {
        padding:6px;
        border:none;
        border-radius:4px;
        background-color:#666;
        color:#fff;
        opacity:1;
    }
   .loading {
        opacity:0.7;
        background-color:#ddd;
        position:fixed;
        width:100%;
        height:100%;
        top:0px;
        left:0px;
        z-index:1 /*(top)*/;
        visibility:hidden
   }
    .loading-content {
        width: 240px; /* or to your liking.*/
        height: 100px;
        text-align:center;
        margin: 0 auto;
        padding-top:25px;
        position: relative;
        top:20%;
        background-color:#900;
        font-size:1.1em;
        font-weight:bold;
        font-style:italic;
        font-family:sans-serif;
        color:#eee;
        opacity:1;
        z-index:2; /*above . loading*/
        user-select: none; /* Non-prefixed version, currently
                              supported by Chrome, Edge, Opera and Firefox */
    }
    #upload {
        background-color:#000; 
        color:#fff;
        font-style:italic;
        font-weight:bold;
        border-radius:8px;
        border-color:#000;
        padding:3px 8px;
        cursor:pointer;
        z-index:-1;
    }
    p {
        display:inline-block;
        font-size:1em;
        font-style:italic;
        color:#555;
    }
    br {
        line-height:40px;
    }
 </style>
  <title>test</title>
</head>
  <body> 
  <%
    'this is VB script, but use whatever language you want to receive the submitted form
    dim tekst
    tekst=Request.Form("tekst")
    if tekst <> "" then
    Response.Write("<h2>" & tekst & " (Submitted only once).</h2>")
    end if
  %>
  <div class="loading"> 
    <div class="loading-content"></div>
  </div>
  <form action="#" method="post" id="form1">
    <input type="text"  name="tekst"  id="tekst" placeholder="Enter some text"/>
    <input type="submit" value="Submit form" Id="upload" />  <p>Try and double or triple click to check, also during submit.</p>       
  </form>
  <script type="text/javascript">
     $(function () {       
         $(":submit").on('click', function (e) { //this happens when you click, doubleclick or whatever how many clicks you do:
                 e.preventDefault(); //first we prevent a submit to happen
                 $(':submit').attr('disabled', 'disabled'); // then disable the submit button
                 $('.loading').css('visibility', 'visible'); //now the page load message is made visible                    
                 $('.loading-content').html("Page is loading.<br>Please wait a second.");
                 $('.loading').fadeOut(3000); // you do this your own way of course
                 setTimeout(function () { $('#form1').submit();}, 2000); //Here is the important clue. Now, submit the form, with or without a message . Because of the delay, doubleclicks are filtered out and the form submits only once.
         });                   
     });
   </script>
 </body>
</html>
相关文章：