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

我的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>

登录
验证。。。

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

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

---

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

首先将

display

属性设置为

none

#authenticating {
    display:none;
}

然后在表单的代码中

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

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

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

---

您使用的是jQuery还是纯javascript？很抱歉我的回复太慢。否我的页面不使用jQuery？我会更新这个问题，你有没有尝试过？你学过javascript吗？我们不会只为您编写它…但是，理想情况下，通过内联使用事件侦听器。谢谢，我会尝试一下。