[英]Ajax data form serialize prevent double submit
如果我快速按下觸發觸發點擊的按鈕,我正在努力使自己的表單防止雙重欺騙。 我嘗試在成功后禁用按鈕,但它仍然發送兩次。 這是我的代碼:
<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>
我建議將處理程序從onclick更改為onsubmit並使用e.preventDefault。
$("#formid").on('submit', function(e){
e.preventDefault();
//the rest of your code
});
我會將事件偵聽器綁定到表單的Submit事件,而不是單擊按鈕。 我知道您沒有問這個問題,但是綁定到表單的Submit事件將提供更好的用戶體驗,因為您的用戶仍然可以在表單中按Enter提交。
現在,關於您的問題,看來問題出在您使用Ajax。 即使您的ajax請求尚未返回,該表單仍會提交。 您需要做的是:
$(function () {
$('#myform').submit(function (e) {
e.preventDefault();
// continue on with your business logic
});
});
當然,單擊事件的工作方式相同,因此,如果您需要綁定到提交按鈕的單擊事件,則也可以執行以下操作:
$(function () {
$("button#rezerva").click(function (e) {
e.preventDefault();
// continue on with business logic
});
});
如果您未成功點擊子提交,則必須立即禁用
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;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.