[英]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.