javascript - 用户单击表单上的提交后，如何使加载消息可见？

Question

我的 ASP.NET MVC 应用程序中有一个 HTML 登录表单，如下所示：

<form action="/Account/Login" class="form" method="post">
   <input name="UserName" size="25" type="text" value="">
   <input name="Password" size="25" type="password">
   <button type="submit" class="glossy">Login</button>
</form>

<div class="loading-mask" id="authenticating">
   <span>Authenticating ...</span>
</div>

当用户单击提交时，在处理 /Account/Login 操作之前以及在返回显示错误的部分表单之前或在将用户带到新页面之前会有延迟。

有没有一种方法可以在表单首次出现时使加载 div 不可见，然后在单击提交按钮后使其可见。请注意，我不需要再次隐藏它，因为提交后的任何操作都会导致页面重新加载。

注意我正在寻找一些不使用 jQuery 的方法。

Answer 1

首先将display属性设置为none。

#authenticating {
    display:none;
}

然后在表单的代码中

onsubmit="document.getElementById('authenticating').style.display = 'block'"

编辑 正如Dave所建议的，最好使用事件监听器。

document.getElementsByClassName('form').addEventListener("submit", function(){
    document.getElementById("authenticating").style.display = "block";
}), false);