简体   繁体   中英

How can I change a user message based on the id of a form used for submit?

I have two partial screens. One or the other can be open at the same time.

A login form:

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

and a registration 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>

In the layout screen there is common logic for putting a message on the screen:

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

Is there some way that I change it so the message is different for login and registration.

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

Yes - by checking what is the id of the element the given event is the target, as:

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM