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 
    }); 
});