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

我有一个HTML表单，通过POST提交到另一个页面。它没有什么特别之处，只是在表单验证之后，我尝试隐藏和/或禁用submit按钮，这样就不能重复提交，同时还告诉用户下一页可能需要一段时间才能加载

有关守则如下：

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
}

jQuery（文档）.ready（函数（）{
jQuery（“form#form”）.submit（函数（）{
var result=validate（）；
jQuery（this）.find（'input[type=submit]'））.prop（'disabled'，true）；
jQuery（“#提交按钮包装”）.html（jQuery（“#提交按钮包装”）.html（）+
“

正在加载…这可能需要几分钟时间！”+
"");
返回结果；
});
});
函数验证（）{
return true；//执行填充，然后返回简单的true或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）在运行php后显示

action=“complete.php”

页面的输出。

也许您可以使用$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*/
           }
        }
    });
});

---

顺便说一句：ajax文档

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

我知道您只显示了脚本的一小部分jQuery和HTML，但这还不足以解决您的问题。因为您提到了

action=“complete.php”

，所以并不是所有的代码都在那里，但我在jQuery或HTML代码示例中没有看到这一点。所以我有几个自己的问题

表格是小的还是大的。如果它是一个小表单，那么为什么不在提交页面上显示输出？您可以使用当前拥有的内容来实现这一点，但是一个PHP或ASP页面可以为您节省所需的页面数量。作为旁注，根据表单的大小，您可以在同一页面上进行验证，或者如果表单较大，则继续使用

action=”“

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

最后一部分听起来更符合你的目的。您可以使用

location.href=”http://www.domain.com/home.html";
或使用
window.location（“http://www.domain.com/home.html");
重定向到新页面

关于另一件事，关于其他人的一些评论

您不需要使用

+

，除非您将这些代码分成各自独立的行，而您只需使用一行即可。这可能就是拉杰什对

“

感到困惑的地方。事实上，我不知道为什么你自己在提到Rajesh关于“concat string”和“append”的评论时提到了

+

，因为这两个与

+

无关。事实上，为了猜一猜，他可能指的是你的

jQuery（“#提交按钮包装器”）.html（jQuery（“#提交按钮包装器”）.html（）

，看起来像一个concat字符串

说到append，实际上并不需要，除非您正在做一些事情，比如让用户选择向表单问题添加行

---

不匹配的单引号会导致问题。另外，请尝试

$.append（）

而不是concat字符串。不匹配的引号在哪里？以及

+

有什么问题？比

jQuery.append（）短得多

$.append更具可读性。另外，

font-weight:bold；'

，您有一个单引号，但没有终止引号。请改为尝试\'。

'

标记与

引号匹配对我来说似乎很好。您可以尝试为这两个jquery行设置一个短的超时吗？想法是从submit（）返回在修改表单之前执行函数。您到底尝试了什么？