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

时间:2013-10-25 15:16:25

标签: javascript

我有两个部分屏幕。一个或另一个可以同时打开。

登录表单:

        <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

1 个答案:

答案 0 :(得分: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/