javascript - 如何根据用于提交的表单 ID 更改用户消息？

Question

我有两个部分屏幕。可以同时打开其中之一。

登录表单:

        <form action="/Account/Login" id="login-form" class="form" method="post">
            <button id="login" type="submit">Login</button>
            <button id="register" type="button"  onclick="location.href='/Account/Register'">Register</button>
        </form>

和注册表:

        <form action="/Account/Register" class="form" id="register-form" method="post">
            <button id="register" type="submit">Register</button>
            <button id="login" type="button" onclick="location.href='/Account/Login'">Login</button>
        </form>

在布局屏幕中，有在屏幕上放置消息的通用逻辑:

<p id="authentication-progress"></p>
<script type="text/javascript">
    (function() {
        document.getElementsByClassName('form')[0]
            .addEventListener("submit", function () {
                document.getElementById("login").disabled = true;
                document.getElementById("register").disabled = true;
                document.getElementById('authentication-progress').innerHTML = 'System: Authenticating '
                setInterval(function () {
                    document.getElementById('authentication-progress').innerHTML += '. ';
                }, 3000);
                // document.getElementById("loading-mask").style.display = "block";
            }, false);
    })();
</script>

有什么方法可以更改它，以便登录和注册时的消息不同。

On login:  System: Authenticating
On registration:  System: Registering

Answer 1

是 - 通过检查给定事件的目标元素的 id 是什么，如下:

.addEventListener("submit", function (ev) {
 document.getElementById('authentication-progress').innerHTML = ev.target.getAttribute('id') == "register-form" ? "System: Registering" : "System: Authenticating";
});

JSFiddle:http://jsfiddle.net/njqP7/