Question

我有一个表单，用于检查数据库中输入的电子邮件的状态。问题是，每当我没有填写任何内容并点击输入时，它就会刷新＆＃39;这页纸。当我尝试自己刷新时，会显示以下弹出窗口：＆＃34;确认表单重新提交。您正在寻找的页面使用了您输入的信息。返回该页面可能会导致您重复执行任何操作。你想继续吗？＆＃34;。

有趣的是我通过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

这里有谁知道我做错了什么？如果您需要＆＃39; db-statuscheck.php＆＃39;请告诉我们。文件。我完全确定文件是好的。

Answer 1

使用表单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处理，而不仅仅是单击提交按钮。

Answer 2

您的＆＃34;点击＆＃34; handler必须确保<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>来代替＆＃34;提交＆＃34;输入

Answer 3

它试图做＆＃34;提交＆＃34;而不是Ajax提交。尝试删除type="submit"并使用Ajax提交。

表格提交像ajax不起作用

3 个答案: