我有一个表格,用于检查db中输入电子邮件的状态。 问题是,每当我不填写任何内容并按Enter时,它都会“刷新”页面。 当我尝试自己刷新它时,将显示以下弹出窗口:“确认表单重新提交。您要查找的页面是您输入的已使用信息。返回该页面可能会导致您重复执行任何操作。是否要接着说?”。

有趣的是,我确实通过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'文件。 我100%确信该文件很好。

===============>>#1 票数:3 已采纳

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

===============>>#2 票数:1

您的“单击”处理程序必须确保<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>代替“提交”输入。

===============>>#3 票数:1

它试图执行“提交”而不是Ajax提交。 尝试删除type="submit"并使用Ajax提交。

  ask by user3512502 translate from so

未解决问题?本站智能推荐:

1回复

AJAX表单提交无法正常运行

我正在尝试创建一组JavaScript函数,允许我动态加载和提交表单。 我已经设法创建一个将表单加载到页面中的工作函数,但是我无法使提交函数正常工作。 当我点击提交时,已经加载的表单(使用JavaScript加载功能)消失,原始内容重新出现。 此外,提交功能中的警报也不会出现。 我查
2回复

无法使jQuery和Ajax表单提交工作

我真的是Web编程的新手。 我正在尝试进行表单发布并获取回调。 我正在尝试在这里使用此插件: http : //malsup.com/jquery/form/#ajaxSubmit 但是当我调用它时: $("#my_form").ajaxSubmit(options); 什么都没
5回复

Ajax表单无法正确提交

也许我只是很困惑。 我对AJAX比较陌生。 我在一个页面上最终尝试提交多个表单,但是目前,我只想提交单击了提交按钮的特定表单。 由于范围问题,我已经将“选项”和“绑定”引入了我的单个函数,但我也很乐意在其外部工作。 这是行不通的(尝试根据与页面上其他表单共享的表单类来选择表单,但要选择其
2回复

无法使用ajax提交表单数据?

我对php很陌生,不了解javascript,已经使用tutorials完成了所有js工作。还尝试使用stackoverflow的现有解决方案,但没有成功! 我想做的是尝试基于“选择选项”调用的值使用“提交”按钮更新数据库值。 问题是我单击提交按钮(在viewtest.php上)后,
2回复

无法处理jQuery ajax提交的简单表单

我的表格 : 我的jQuery ajax : 我的newProtocol.php : 显示了由ajax'success'方法触发的带有'ok'文本的警报窗口,但是我无法从newProtocol.php文件中获得带有$_POST['text']值的警报窗口。 Jav
1回复

PHP-AJAX登录无法正常工作

我目前正在使用AJAX登录系统,但是它没有发送回任何响应。 它仅在exit("error here")脚本时返回响应,但我想返回JSON响应。 我的表格: 我的JavaScript: 我的PHP: 有人知道我在做什么错吗? 我试过exit json_encode
2回复

AJAX表单未提交

我正在使用AJAX和jQuery处理登录表单,但是表单提交的方式不正确:它将进入process.php而不是在index.php上返回消息。 index.html 表格中没有发现任何错误。 至少我在那里找不到任何错误。 index.html; 这是JS AJAX脚本
1回复

无法停止打开Action目标来提交AJAX表单

我基本上复制了我在网站上运行的完整表单提交代码,然后将其粘贴到空白文件中,以修改其内容并节省一些时间。 从理论上讲,如果原始文件在继续完成提交的同时停止了打开动作目标文件的正常表单提交,则该文件应该执行相同的操作。 但是,我无法像它那样正常工作。 我无法阻止提交内容离开当前窗口。
1回复

通过AJAX提交表单无效

我正在尝试使用Jquery和AJAX提交小的联系表单而不刷新页面。 我从另一个Stackoverflow线程获取了代码,但是当我尝试提交表单并单击“提交”按钮时,什么都没有发生。 我什至在控制台上也没有收到任何错误消息。 所以任何人都可以告诉我我在做什么错。 这是表格 这是JS:
1回复

Ajax表单在提交时重复

我有3个选择框,每个选择框的值根据之前选择框的选择进行填充: selectbox1 => populates => selectBox2 =>填充selectBox 3: 现在,当用户点击提交时,我想使用选择框中的值来查询我的数据库 我的问题 当我点击