提交表单时如何隐藏表单并显示进度条答案

【问题标题】：How to hide form and show progress bar while submitting form提交表单时如何隐藏表单并显示进度条
【发布时间】：2013-08-29 08:03:16
【问题描述】：

我在 StackOverflow 上查看了一些类似的示例，但我似乎无法让它发挥作用。我有一个 onclick 事件，它转到一个函数，如果返回 ok，它将转到另一个函数，如果没问题，它将在 else 语句中提交它，例如：

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

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

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

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

更新：

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

        $(function() {

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

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

【问题讨论】：

标签： php javascript jquery twitter-bootstrap

【解决方案1】：

document.forms 是一个对象，其中包含表单的名称，而不是 ID。

如果您的表单没有输入的名称 (<form name="input">...</form>)，您绑定到的jQuery 选择器将不起作用。相反，您需要使用$('[name=input']).submit(...)。

【讨论】：

【解决方案2】：

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

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

简单JSFiddle demo

【讨论】：

我不确定如何准确地实现这一点。我在我的 else 语句中提交，这可能用 jquery 吗？例如，如果它到达我的 else 语句，那么它将提交表单。
你没有在你的问题中提到任何其他逻辑，所以我故意省略了。如果您的函数中有条件逻辑（例如表单字段验证），则在一切正常时只需 return true;，否则 return false; 会阻止表单提交。

【解决方案3】：

表单提交重新加载页面。

因此在您的头部添加：

$(window).load(function() {
  // Animate loader off screen
  console.log("loading");
  $("#dvLoading").fadeOut(2000);
});

【讨论】：