如何防止按鈕重復提交

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>