当我禁用提交按钮(在表单提交之后）时，页面不会加载

When I disable submit button (after form submit) the page does not load

本文关键字：加载 之后 表单提交 提交 按钮      更新时间：2023-09-26

我有一个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运行完毕，就显示它的输出。

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

  1. 将POST数据发送到/some.php
  2. 发送数据后，向更改按钮行为的用户提供反馈
  3. 任务完成后，接收数据，验证成功或错误，并采取相应行动。如果OK，将按钮文本更改为"complete！"或其他内容，并将响应数据附加到某个div中。如果NOT OK，也给出反馈

代码中：

$("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/

如果返回true（如果已验证），则提交表单。但是，您正在更改DOM/submit按钮包装器，并从本质上删除了submit按钮，对吧？很可能这就是造成你问题的原因。不要使用提交按钮包装器。如果您想显示一条消息，将其显示为覆盖，或者隐藏提交按钮包装并在其位置显示消息包装，请不要完全删除提交按钮。

我知道您只是显示了脚本中的jQuery和HTML部分，但这还不足以解决您的问题。因为您提到了action="complete.php"，但我在您的jQuery或HTML代码示例中没有看到这一点，所以似乎并不是所有的内容都在那里。所以我有一些自己的问题。

  1. 表格是小的还是大的。如果它是一个小表单，那么为什么不在提交页面上显示输出呢？你可以用你目前拥有的东西来做到这一点，但一个PHP或ASP页面可以节省你需要制作的页面数量。顺便说一句，根据表单的大小，您可以在同一页上进行验证，或者在较大的情况下继续使用action=""。

  2. 您是否需要数据库文件，或者正在保存到数据库文件中？如果你这样做了，你可以写入数据库文件，让提交打开下一个页面，并在新页面上查看数据库中保存的内容。同样，您可能可以使用单个PHP或ASP页面。

  3. 最后一部分听起来更符合你的目的。您可以使用location.href="http://www.domain.com/home.html";或者使用CCD_ 5重定向到新页面。

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

  1. 您并不完全需要+，除非您将其中的每一个划分为各自独立的行，而您只需使用一行即可。这可能就是Rajesh对'感到困惑的原因。事实上，我不知道你自己为什么在提到Rajesh关于"concat string"answers"append"的评论时提到+，因为这两者与+无关。事实上，猜测一下，他可能指的是你的jQuery("#submit-button-wrapper").html(jQuery("#submit-button-wrapper").html()，它看起来有点像一个concat字符串。

  2. 说到追加，这不是真正需要的，除非你正在做一些事情，比如给用户一个向表单问题添加行的选项。

相关文章：