我有这个表单，当用户发送它时，有时它会被提交 2-3-4 次，或更多次，而不仅仅是一次。
我禁用了按钮，但这并没有解决问题。
这是怎么回事？我不知道该怎么办。如果禁用按钮不能解决问题，那什么可以？
<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>');
}
});
});
});
最佳答案
尝试将按钮更改为 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>');
}
});
});
});
关于javascript - 仅提交一次 ajax 表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41913704/