如何防止按钮重复提交

Question

我有两个按钮，一个按钮用于增加计数，另一个按钮用于提交计数并移至下一页。 但我面临的错误是，当我按下“继续”按钮时，需要按下两次才能移动到下一页，并且计数加倍并提交。 以下是代码：

代码：

  <button class="btn_success" id="btn_add" value="add areas">Confirm</button>

  <button class="brown-button" id="Proceed" onclick="location.href='gallery.php'; return false;">Proceed &nbsp;😀</a></button>

    

    var imagecount=0;

    $('.btn_success').click(function(){
      imagecount+=1;
      
      });


    $("#Proceed").click(function(){

        $.ajax({
                type:'POST',
                url: 'server.php',
                data:{
                    'imagecount':imagecount,
                      },
          success: function(data){
                alert(imagecount);
                }
                })
          });

对于上面的代码，btn_success 用于增加计数，当我按下继续按钮时，计数值被提交并移动到下一页。 但是，当按下 Proceed 按钮时，警报弹出两次并且提交的计数值加倍，即，如果按下 Proceed 按钮时计数为 3，则将其保存为 6。我想重新引用此错误并将其保存为值3.

有人可以帮我解决这个问题吗

Answer 1

简单来说，在您的事件处理程序中（缺少，因为id="finish"没有元素），您可以执行以下操作：

 $(function () { $("#finish").click(function () { // Cache this to use inside another function. $this = $(this); $this.prop("disabled", true); console.log("Sending AJAX call... You can't re-submit the Finish button again... Please wait..."); setTimeout(function () { console.log("Got output from server..."); $this.prop("disabled", false); }, 1000); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="finish">Finish</button>

为了获得更好的用户体验，您可以执行以下操作：

 $(function () { $("#finish").click(function () { // Cache this to use inside another function. $this = $(this); $this.prop("disabled", true); $("#notification").text("Sending AJAX call... You can't re-submit the Finish button again... Please wait..."); setTimeout(function () { $("#notification").text("Got output from server..."); $this.prop("disabled", false); }, 1000); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="finish">Finish</button> <span id="notification"></span>