我有这个表单，当用户发送它时，有时会提交2-3-4x或更多，而不仅仅是一次。
我将按钮设为禁用，但这并没有解决问题。
什么是错的？我不知道该怎么做。如果禁用按钮不解决它，那会是什么？
<form class="form-horizontal" id="AjanlatForm" method="post">
<div class="form-group">
<label class="col-md-3 control-label ajanlat_label" >Az Ön neve:</label>
<div class="col-md-8">
<input id="AjanlatNev" name="AjanlatNev" type="text" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label ajanlat_label" >E-mail címe:</label>
<div class="col-md-8">
<input id="AjanlatEmail" name="AjanlatEmail" type="text" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label ajanlat_label" >Telefonszáma:</label>
<div class="col-md-8">
<input id="AjanlatTel" name="AjanlatTel" type="text" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label ajanlat_label" >Szállítási cím:</label>
<div class="col-md-8">
<input id="AjanlatCim" name="AjanlatCim" type="text" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label ajanlat_label" >Mennyiség:</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" id="AjanlatMennyiseg" name="AjanlatMennyiseg">
<span class="input-group-btn">
<select class="btn selectBtn" id="AjanlatMennyisegTipus" name="AjanlatMennyisegTipus">
<option value="Darab">Darab</option>
<option value="Kamion">Kamion</option>
<option value="Raklap">Raklap</option>
<option value="Tekercs">Tekercs</option>
<option value="Zsák">Zsák</option>
<option value="cm">cm</option>
<option value="m">m</option>
<option value="m2">m2</option>
<option value="m3">m3</option>
</select>
</span> </div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label ajanlat_label" >Üzenet:</label>
<div class="col-md-8">
<textarea name="AjanlatUzenet" id="AjanlatUzenet" rows="7" class="form-control input-md"></textarea>
</div>
</div>
<div class="text-center">
<p class="ajanlat_modal_text">A küldés gombot kérjük csak egyszer nyomja meg.</p>
<input type="hidden" id="AjanlatTermekID" name="AjanlatTermekID" value="91">
<button type="button" id="kerdesButton" class="btn btn-default sidebar_button">Ajánlatkérés elküldése</button>
</div>
<div class="text-center">
<div id="AjanlatResult"></div>
</div>
</form>
$(document).ready(function(e) {
$('.fancybox').fancybox();
$("#AjanlatKeresBtn").click(function()
{
$('#AjanlatResult').hide();
$("#AjanlatModal").modal("show");
$('#kerdesButton').click(function(e)
{
$('#kerdesButton').prop('disabled', true);
e.preventDefault();
var FormErros = [];
var AjanlatNev = $('#AjanlatNev').val();
var AjanlatEmail = $('#AjanlatEmail').val();
var AjanlatTel = $('#AjanlatTel').val();
var AjanlatCim = $('#AjanlatCim').val();
var AjanlatMennyiseg = $('#AjanlatMennyiseg').val();
var AjanlatUzenet = $('#AjanlatUzenet').val();
var AjanlatTermekID = $('#AjanlatTermekID').val();
if($.trim(AjanlatNev) == "") { FormErros.push("Nem adta meg a nevét."); }
if($.trim(AjanlatEmail) == "") { FormErros.push("Nem adta meg az e-mail címét."); }
if(AjanlatEmail != "")
{
if(validate_Email(AjanlatEmail) == false){FormErros.push("Elképzelhető, hogy hibásan adta meg az e-mail címét.");}
}
if($.trim(AjanlatTel) == "") { FormErros.push("Nem adta meg a telefonszámát."); }
if($.trim(AjanlatUzenet) == "") { FormErros.push("Nem írt semmilyen kérdést vagy üzenetet."); }
if($.trim(AjanlatTermekID) == "") { FormErros.push("Hiányzik a termék ID."); }
if(AjanlatTermekID != "")
{
if(!$.isNumeric(AjanlatTermekID)){FormErros.push("A termék ID nem szám típusú.");}
}
if($.trim(AjanlatCim) == "") { FormErros.push("Nem adta meg a szállítási címet."); }
if($.trim(AjanlatMennyiseg) == "") { FormErros.push("Nem adta meg a termék(ek) mennyiségét."); }
if(FormErros.length == 0 )
{
$.ajax({
type: 'POST',
cache: false,
data: $('#AjanlatForm').serialize(),
url: 'files/uj-ajanlatkeres.php',
success: function(data)
{
//$('#kerdesButton').prop('disabled', false);
$('#kerdesButton').hide();
$('#AjanlatForm')[0].reset();
location.href = "https://my-domain.com/uzenet/uj-ajanlatkeres";
}
});
}
else
{
$('#kerdesButton').prop('disabled', false);
$('#AjanlatResult').fadeIn( "slow" ).html('<div class="javascript_rror_div">'+(FormErros.join('<br/>'))+'</div>');
}
});
});
});
答案 0 :(得分：1)
尝试将按钮更改为type="submit"并为表单注册submit事件处理程序，而不是按钮的click事件处理程序。
<form class="form-horizontal" id="AjanlatForm" method="post">
<div class="form-group">
<label class="col-md-3 control-label ajanlat_label" >Az Ön neve:</label>
<div class="col-md-8">
<input id="AjanlatNev" name="AjanlatNev" type="text" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label ajanlat_label" >E-mail címe:</label>
<div class="col-md-8">
<input id="AjanlatEmail" name="AjanlatEmail" type="text" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label ajanlat_label" >Telefonszáma:</label>
<div class="col-md-8">
<input id="AjanlatTel" name="AjanlatTel" type="text" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label ajanlat_label" >Szállítási cím:</label>
<div class="col-md-8">
<input id="AjanlatCim" name="AjanlatCim" type="text" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label ajanlat_label" >Mennyiség:</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" id="AjanlatMennyiseg" name="AjanlatMennyiseg">
<span class="input-group-btn">
<select class="btn selectBtn" id="AjanlatMennyisegTipus" name="AjanlatMennyisegTipus">
<option value="Darab">Darab</option>
<option value="Kamion">Kamion</option>
<option value="Raklap">Raklap</option>
<option value="Tekercs">Tekercs</option>
<option value="Zsák">Zsák</option>
<option value="cm">cm</option>
<option value="m">m</option>
<option value="m2">m2</option>
<option value="m3">m3</option>
</select>
</span> </div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label ajanlat_label" >Üzenet:</label>
<div class="col-md-8">
<textarea name="AjanlatUzenet" id="AjanlatUzenet" rows="7" class="form-control input-md"></textarea>
</div>
</div>
<div class="text-center">
<p class="ajanlat_modal_text">A küldés gombot kérjük csak egyszer nyomja meg.</p>
<input type="hidden" id="AjanlatTermekID" name="AjanlatTermekID" value="91">
<button type="submit" id="kerdesButton" class="btn btn-default sidebar_button">Ajánlatkérés elküldése</button>
</div>
<div class="text-center">
<div id="AjanlatResult"></div>
</div>
</form>
$(document).ready(function(e) {
$('.fancybox').fancybox();
$("#AjanlatKeresBtn").click(function()
{
$('#AjanlatResult').hide();
$("#AjanlatModal").modal("show");
$('#AjanlatForm').on('submit', function(e)
{
$('#kerdesButton').prop('disabled', true);
e.preventDefault();
var FormErros = [];
var AjanlatNev = $('#AjanlatNev').val();
var AjanlatEmail = $('#AjanlatEmail').val();
var AjanlatTel = $('#AjanlatTel').val();
var AjanlatCim = $('#AjanlatCim').val();
var AjanlatMennyiseg = $('#AjanlatMennyiseg').val();
var AjanlatUzenet = $('#AjanlatUzenet').val();
var AjanlatTermekID = $('#AjanlatTermekID').val();
if($.trim(AjanlatNev) == "") { FormErros.push("Nem adta meg a nevét."); }
if($.trim(AjanlatEmail) == "") { FormErros.push("Nem adta meg az e-mail címét."); }
if(AjanlatEmail != "")
{
if(validate_Email(AjanlatEmail) == false){FormErros.push("Elképzelhető, hogy hibásan adta meg az e-mail címét.");}
}
if($.trim(AjanlatTel) == "") { FormErros.push("Nem adta meg a telefonszámát."); }
if($.trim(AjanlatUzenet) == "") { FormErros.push("Nem írt semmilyen kérdést vagy üzenetet."); }
if($.trim(AjanlatTermekID) == "") { FormErros.push("Hiányzik a termék ID."); }
if(AjanlatTermekID != "")
{
if(!$.isNumeric(AjanlatTermekID)){FormErros.push("A termék ID nem szám típusú.");}
}
if($.trim(AjanlatCim) == "") { FormErros.push("Nem adta meg a szállítási címet."); }
if($.trim(AjanlatMennyiseg) == "") { FormErros.push("Nem adta meg a termék(ek) mennyiségét."); }
if(FormErros.length == 0 )
{
$.ajax({
type: 'POST',
cache: false,
data: $('#AjanlatForm').serialize(),
url: 'files/uj-ajanlatkeres.php',
success: function(data)
{
//$('#kerdesButton').prop('disabled', false);
$('#kerdesButton').hide();
$('#AjanlatForm')[0].reset();
location.href = "https://my-domain.com/uzenet/uj-ajanlatkeres";
}
});
}
else
{
$('#kerdesButton').prop('disabled', false);
$('#AjanlatResult').fadeIn( "slow" ).html('<div class="javascript_rror_div">'+(FormErros.join('<br/>'))+'</div>');
}
});
});
});
答案 1 :(得分：1)
您需要对按钮执行此操作：
<button class="myButton" type="submit">Click Here</button>
你需要在javascript中执行此操作：
$(".myButton").click(function(){
$(".myForm").submit(function(e) {
// Cancels the form's submit action.
e.preventDefault();
// Do post in here
})
})
答案 2 :(得分：0)
用以下内容替换你的ajax调用：
var form = $("form");
var jqXHR = form.data("jqXHR");
if (jqXHR) {
jqXHR.abort();
}
form.data("jqXHR", $.ajax({
type: 'POST',
cache: false,
data: $('#AjanlatForm').serialize(),
url: 'files/uj-ajanlatkeres.php',
success: function (data) {
//$('#kerdesButton').prop('disabled', false);
$('#kerdesButton').hide();
$('#AjanlatForm')[0].reset();
location.href = "https://my-domain.com/uzenet/uj-ajanlatkeres";
},
complete: function (jqXHR, textStatus) {
form.removeData('jqXHR');
}
}));