Question

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

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

所以我尝试对此进行评论并将其发送到名为showHide（）的函数

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

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

更新

我能够使用bootstrap进度条和jquery ui进度条来实现这一点。我只是在提交表单之前运行进度条。我加载视图时隐藏了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

Answer 2

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

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

Answer 3

表单提交重新加载页面。

因此在你的头部添加：

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

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

3 个答案: