如何在用户单击表单上的提交后显示加载消息？

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>

当用户点击提交时，在处理/帐户/登录操作之前和返回之前有一个延迟，其中部分表单显示错误或在用户转到新页面之前。

有没有一种方法可以在首次显示表单时使加载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);