php - 如何在提交表单时隐藏表单并显示进度条

Question

我在 StackOverflow 上看过几个类似的例子，但我似乎无法让它发挥作用。我有一个转到一个函数的 onclick 事件，如果返回正常，它转到另一个函数，如果没问题，它将在 else 语句中提交它，例如:

document.forms["input"].submit();

所以我尝试将其注释掉并将其发送到一个名为 showHide() 的函数

function showHide() {
    $('#input').submit(function () {
        $('#main-content').hide();
        $('#progress').show();
    });
}

它似乎没有像预期那样提交表单。我基本上想使用 bootstrap 并显示动画进度条，以便用户知道正在发生的事情，因为有时提交可能需要一段时间。

更新:

我能够使用 bootstrap 进度条和 jquery ui 进度条来实现这一点。我只是在提交表单之前运行进度条。我在加载 View 时隐藏了 div。

        $(function() {

            $("#progress").show();
            });

        document.forms["input"].submit();

Answer 1

如果没有看到更多 HTML，则很难进行故障排除。但是看起来您已经定义了一个函数，并且在这个函数中您期望一个元素来触发它，这实际上是行不通的。您可以从表单的提交事件中调用您的函数，如下所示:

//this assumes you have a form with id "input"
$('#input').submit(function () {
    showHide();
});
function showHide() {
    $('#main-content').hide();
    $('#progress').show();      
}

简单 JSFiddle demo