Ajax數據表格序列化防止雙重提交

Question

如果我按下快速觸發點擊呼叫的按鈕，我正努力使自己的表單能夠防止雙重submision。我試圖在成功後禁用按鈕，但它仍然發送兩次。這裏是我的代碼：

<script> 
$(document).ready(function() { 

    $("button#rezerva").click(function() { 
     var chkArray = []; 
     $(".table:checked").each(function() { 
      chkArray.push($(this).attr("id")); 
     }); 
     var selected; 
     selected = chkArray.join(","); 
     $.ajax({ 
      type: "POST", 
      url: "http://rezerv.city/engine/app/add_rezervare.php?mese=" + selected, 
      data: $("form#formular_rezervare").serialize(), 
      success: function (data) { 
       switch (data) { 
        case "nume_error": 
         $(".msg").html("<p>Vă rugăm completați numele</p>").fadeIn("slow"); 
         break; 
        case "tel_error": 
         $(".msg").html("<p>Vă rugăm completați telefonul</p>").fadeIn("slow"); 
         break; 
        case "email_error": 
         $(".msg").html("<p>Vă rugăm completați un email valid</p>").fadeIn("slow"); 
         break; 
        case "tel_numar": 
         $(".msg").html("<p>Numarul de telefon trebuie sa contina 10 cifre</p>").fadeIn("slow"); 
         break; 
        case "adaugat": 
         $('#rezerva").attr('disabled', 'disabled') 
         var ora = document.getElementById("timepicker1").value; 
         var zi_aleasa = document.getElementById("zi").value; 
         var tip = document.getElementById("tipp").value; 
         var id_local = document.getElementById("id_local").value; 
         $("#filtru_zi").load("http://rezerv.city/select_tip_rezervare.php?zi=" + zi_aleasa + "&tip=" + tip + "&id=" + id_local); 
         $(".succes").html("<p class=\'text-center\'>Ati rezervat masa <b>" + selected + "</b> in data de <b>" + zi_aleasa + "</b> la ora <b>" + ora + "</b></p><p class=\'text-center\'><button class=\'btn btn-default\' type=\'button\' id=\'inchide\'>Închide</button></p>").fadeIn("slow"); 
         break; 
        default: 
         alert("A aparut o eroare. Va rugam incercati mai tarziu."); 
       } 
      }, 
     }); 
    }); 
}); 
</script> 

Answer 1

你必須立即禁用，當點擊subbmit不在成功

selected = chkArray.join(","); 
$('#rezerva"]').attr('disabled','disabled')//ADD THIS 
$.ajax({ 
      type: "POST", 
      url: "http://rezerv.city/engine/app/add_rezervare.php?mese="+selected, 
      data: $("form#formular_rezervare").serialize(), 
      success: function(data){ 
      switch(data) { 
        case "nume_error": 
         $(".msg").html("<p>Vă rugăm completați numele</p>").fadeIn("slow"); 
$('#rezerva"]').attr('enable','enable')//ADD THIS 
         break; 

Answer 2

我建議將處理程序從onclick更改爲onsubmit並使用e.preventDefault。

$("#formid").on('submit', function(e){ 
    e.preventDefault(); 
    //the rest of your code 
}); 

Answer 3

我會將事件偵聽器綁定到表單的提交事件而不是按鈕的單擊。我知道你沒有在你的問題上提出要求，但是綁定到表單的提交事件會給用戶帶來更好的體驗，因爲你的用戶仍然可以在表單中按下輸入來提交它。

現在，至於你的問題，看起來問題在於你使用Ajax。即使您的ajax請求尚未返回，該表單仍會提交。你需要做的是：

$(function() { 
    $('#myform').submit(function (e) { 
      e.preventDefault(); 

      // continue on with your business logic 
    }); 
}); 

當然的Click事件的工作方式相同，因此，如果您需要綁定到提交按鈕的點擊事件，你可以做以下還有：

$(function() { 
    $("button#rezerva").click(function (e) { 
     e.preventDefault(); 

     // continue on with business logic 
    }); 
});