javascript - 当我禁用提交按钮时(表单提交后)页面不加载

Question

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

相关代码为:

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 实现这一点并在同一页面上显示结果。

1. 发送 POST 数据到/some.php
2. 发送数据后，反馈给用户改变按钮行为
3. 任务完成后，接收数据并验证成功或错误并采取相应行动。如果确定，将按钮文本更改为“完成!”或其他东西，并将响应数据附加到某个 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 文档 http://api.jquery.com/jquery.ajax/