我有一个表格,它检查数据库中输入电子邮件的状态。问题是,每当我不填写任何内容并点击回车键时,它就会"刷新"页面。当我尝试自己刷新它时,会显示以下弹出窗口:"确认表单重新提交。您要查找的页面使用了您输入的信息。返回到该页面可能会导致重复您所做的任何操作。您想继续吗?"。
有趣的是,我确实通过Ajax提交了我的表单。它适用于除此之外的任何其他页面,这有点奇怪。我重新检查了所有的东西,但找不出哪里有错。
这是我的表单:
<div class="content main container">
<div class="content main box">
<form method="post" id="checkStatForm" name="form">
<input type="email" class="fullwidth-input-field" name="email" placeholder="- fill in the email you registered with -" autocomplete="off" />
</form>
<input type="submit" class="button red" id="checkStatusNow" value="Check status" />
</div>
</div>
这是我的javascript文章
//Statuscheck
$(function() {
$("#checkStatusNow").click(function(e) {
$.ajax({
type: "POST",
url: "db-requests/db-statuscheck.php",
data: $("#checkStatForm").serialize(),
success: function(data,textStatus,jqXHR){ finishCheck(data,textStatus,jqXHR); }
});
});
});
function finishCheck( data , textStatus ,jqXHR ) {
if ( data == "requiredFieldsStatusCheck" ) {
$('#emptyField').fadeIn(500).show();
$('#wrongEmailFormat').fadeOut(300).hide();
$('#noPaymentReceived').fadeOut(300).hide();
$('#awaitingProcessing').fadeOut(300).hide();
$('#udidIsActivated').fadeOut(300).hide();
$('#noEmailResults').fadeOut(300).hide();
$('#betaIsActivated').fadeOut(300).hide();
}
if ( data == "errorEmailFormatStatusCheck" ) {
$('#wrongEmailFormat').fadeIn(500).show();
$('#emptyField').fadeOut(300).hide();
$('#noPaymentReceived').fadeOut(300).hide();
$('#awaitingProcessing').fadeOut(300).hide();
$('#udidIsActivated').fadeOut(300).hide();
$('#noEmailResults').fadeOut(300).hide();
$('#betaIsActivated').fadeOut(300).hide();
}
if ( data == "noPaymentReceived" ) {
$('#noPaymentReceived').fadeIn(500).show();
$('#emptyField').fadeOut(300).hide();
$('#wrongEmailFormat').fadeOut(300).hide();
$('#awaitingProcessing').fadeOut(300).hide();
$('#udidIsActivated').fadeOut(300).hide();
$('#noEmailResults').fadeOut(300).hide();
$('#betaIsActivated').fadeOut(300).hide();
}
if ( data == "paymentReceivedAwaitingProcessing" ) {
$('#awaitingProcessing').fadeIn(500).show();
$('#emptyField').fadeOut(300).hide();
$('#wrongEmailFormat').fadeOut(300).hide();
$('#noPaymentReceived').fadeOut(300).hide();
$('#udidIsActivated').fadeOut(300).hide();
$('#noEmailResults').fadeOut(300).hide();
$('#betaIsActivated').fadeOut(300).hide();
}
if ( data == "udidIsActivated" ) {
$('#udidIsActivated').fadeIn(500).show();
$('#emptyField').fadeOut(300).hide();
$('#wrongEmailFormat').fadeOut(300).hide();
$('#noPaymentReceived').fadeOut(300).hide();
$('#awaitingProcessing').fadeOut(300).hide();
$('#noEmailResults').fadeOut(300).hide();
$('#betaIsActivated').fadeOut(300).hide();
}
if ( data == "betaIsActivated" ) {
$('#betaIsActivated').fadeIn(500).show();
$('#emptyField').fadeOut(300).hide();
$('#wrongEmailFormat').fadeOut(300).hide();
$('#noPaymentReceived').fadeOut(300).hide();
$('#awaitingProcessing').fadeOut(300).hide();
$('#noEmailResults').fadeOut(300).hide();
$('#udidIsActivated').fadeOut(300).hide();
}
if ( data == "noEntryFound" ) {
$('#noEmailResults').fadeIn(500).show();
$('#emptyField').fadeOut(300).hide();
$('#wrongEmailFormat').fadeOut(300).hide();
$('#noPaymentReceived').fadeOut(300).hide();
$('#awaitingProcessing').fadeOut(300).hide();
$('#udidIsActivated').fadeOut(300).hide();
$('#betaIsActivated').fadeOut(300).hide();
}
}
//End statuscheck
有谁知道我做错了什么?如果您需要"db-statuscheck.php"文件,请告诉我。我百分之百肯定这个文件很好。
使用表单的onsubmit
处理程序而不是单击按钮,并且需要返回false或阻止默认值:
$("#checkStatForm").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "db-requests/db-statuscheck.php",
data: $("#checkStatForm").serialize(),
success: function(data,textStatus,jqXHR){ finishCheck(data,textStatus,jqXHR); }
});
});
现在,通过回车键提交表单也将通过ajax处理,而不仅仅是点击提交按钮。
您的"点击"处理程序必须确保<input type=submit>
的默认行为不会发生,因为该默认行为是<form>
的普通提交。
$("#checkStatusNow").click(function(e) {
e.preventDefault(); // <---- THIS
$.ajax({
type: "POST",
url: "db-requests/db-statuscheck.php",
data: $("#checkStatForm").serialize(),
success: function(data,textStatus,jqXHR){ finishCheck(data,textStatus,jqXHR); }
});
});
纯粹主义者可能不同意,我添加这一点是为了完整性,而不是激起愤怒,但另一种选择是使用<button type=button>
代替"提交"输入。
它试图执行"提交"而不是Ajax提交。尝试删除type="submit"
并使用Ajax提交。