Question

我有一个HTML表单，通过POST提交到另一个页面。关于它没有什么特别之处，除了在表单验证后我尝试隐藏和/或禁用提交按钮以使其不能双重提交，同时还告诉用户下一页可能需要一段时间才能加载。

相关代码是：

jQuery(document).ready(function () {

    jQuery("form#form").submit(function() {
        var result = validate();
        jQuery(this).find('input[type=submit]').prop('disabled', true);
        jQuery("#submit-button-wrapper").html(jQuery("#submit-button-wrapper").html()+
             "<br/><br/><span style='margin: 25px; padding: 5px; background: yellow; "+
             "width: 100%; font-weight: bold;'>Loading... this may take a few minutes! "+
             "<i class='fa fa-spinner fa-spin' style='color: blue;'></i></span>");
        return result;
    });

});

function validate() {
    return true; // Does stuff, then returns a simple true or false
}

根据要求，这是（非常简单的）按钮包装HTML：

<div class="col-sm-12" id="submit-button-wrapper">
     <input type="submit" value="One More Step" />
</div>

当我删除更改按钮包装器的HTML时，表单会按照您的预期提交。然而，当我进入该行时，仍会调用下一页并执行该代码，而不显示所显示的页面。

我已经在Chrome和Firefox中进行了测试，因此我知道这不是浏览器问题，但这确实很奇怪。我做错了什么？

我的目标：（1）验证用户的输入，（2）向用户提供页面加载需要一段时间的线索，以及（3）显示action="complete.php"页面的输出PHP就已经运行了。

Answer 1

也许你可以用$ ajax实现这一点，并在同一页面上显示结果。

将POST数据发送到/some.php
发送数据后，向用户更改按钮行为提供反馈
任务完成后，接收数据并验证成功或错误并采取相应措施。如果确定，请将按钮文本更改为“完成！”或其他东西，并将响应数据附加到某个div。如果不行，也提供反馈。

在代码中：

$("form#form").submit(function(e) {
    e.preventDefault();
    $.ajax({
        method: "POST",
        url: "some.php",
        data: $(this).serialize(),
        dataType : 'json',
        timeout: 2000,
        cache: false,
        afterSend: function() {
        /*change button behavior here*/
        },
        success: function(result) {
            if (result === "ok"){
               /*maybe append data to div and update button text to complete*/

           } else {
               /*if result not ok, send feedback*/
           }
        }
    });
});

BTW：ajax文档http://api.jquery.com/jquery.ajax/

Answer 2

当您返回true（如果已验证）时，表单将被提交。但是，您正在更改DOM /提交按钮包装器并基本上删除提交按钮，对吧？可能这就是造成问题的原因。单独保留提交按钮包装器。如果要显示一条消息，将其显示为叠加层或隐藏提交按钮包装器并在其位置显示消息包装，请不要完全删除提交按钮。

Answer 3

我知道您只是显示了脚本的轻微jQuery和HTML部分，但这还不足以找出问题所在。因为你提到action="complete.php"并不是全部，所以我不会在你的jQuery或HTML代码示例中看到它。所以我有几个问题。

表单是小还是大。如果它是一个小表格，那你为什么不在提交页面上显示输出？你可以用你现在拥有的东西来做到这一点，但是单个PHP或ASP页面可以节省你要制作的页面数量和不存在的页面数量。作为旁注，根据表单的大小，您可以在同一页面上进行验证，或者如果较大则继续使用action=""。
您是否需要数据库文件或保存为一个？如果您这样做，您可以写入数据库文件，让提交打开下一页并查看该新页面上数据库中保存的内容。同样，您可以使用单个PHP或ASP页面。
这最后一部分听起来更有效。你可以使用location.href="http://www.domain.com/home.html"; 或使用window.location("http://www.domain.com/home.html");重定向到新页面。

关于其他一些评论的另一个问题。

您并不需要+，除非您将其中的每一行划分为各自的行，而您只需使用一行即可。这可能是拉杰什对'感到困惑的原因。事实上，我不确定你在提到Rajesh关于＆＃34; concat string＆＃34;的评论时你自己提到+的原因。并且＆＃34;追加＆＃34; ，因为这两者与+无关。事实上，为了猜测，他可能一直在指你的jQuery("#submit-button-wrapper").html(jQuery("#submit-button-wrapper").html()看起来像一个连续的字符串。
谈到追加，不是真的需要，除非你做了一些事情，比如让用户选择在表单问题中添加行。

当我禁用提交按钮（表单提交后）页面无法加载

3 个答案: