Question

JSfiddle：CODE

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

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

但是 NOW ：该按钮已停用且页面已重新加载，但表单未提交信息...请提供任何解决方案

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

Answer 1

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

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

如果某人（例如我几周前）建议将return false放在你的功能结束时，请参阅文章jQuery Events: Stop (Mis)Using Return False（近两年前）。

以上内容有助于使用AJAX发送表单，也可以作为常规表单提交。但是，似乎你的问题是两次点击提交按钮（偶然或故意）。正如您在答案中指出的那样，解决方法是在短（人）/长（计算机）时间后BalusC pointed out in his answer停用按钮：

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

Answer 2

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

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

Answer 3

我遇到了无法抗拒两次或三次或多次点击的人的问题。这可能会给您造成各种各样的问题。这就是我使用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>

Answer 4

您也可以使用

$（“ form”）。beforeSubmit（function（）{//这里的函数体....}）;

避免在我的表单JQuery中双重提交

4 个答案: