onSubmit button won't load location

Question

I switched from type=click to type=submit so that I can use the Enter key to login. The if/else statements for invalid username/password functions fine. But if I input the correct credentials it wont load the location(different HTML page.)

PS: I'm new to coding in general(only 3 weeks in) Try to explain it so a newbie would know. Thanks in advance.

<script type="text/javascript">
    function check_info(){
        var username = document.login.username.value;
        var password = document.login.password.value;

        if (username=="" || password=="") {
            alert("Please fill in all fields")
        } else {
            if(username=="test") {
                if (password=="test") {
                    location="Random.html"
                } else {
                    alert("Invalid Password")
                }
            } else { 
                alert("Invalid Username")
            }
        }
    }
</script>

<form name=login onsubmit="check_info()">
    Username:
    <input type="text" name="username" id="username"/>
    <br>
    Password:
    <input type="password" name="password" id="password"/>
    <br>
    <br>
    <input type="submit" value="Login"/>
</form>

score 2 · Answer 1 · answered Sep 23 '14 at 19:52

2

You need to use .href on location

location.href = "Random.html";

(Also, since you said you were new, be sure to keep your dev console (F12) open when writing JavaScript and testing - you'll catch a lot of errors very early on)

answered Sep 23 '14 at 19:52

tymeJV

103,943
14
161
157

score 1 · Accepted Answer · edited May 23 '17 at 12:29

Two things:

1 - Proper way to simulate a clink on a link is to use change the href attribute of location, not location itself. The line below should work:

window.location.href = "Random.html";

2 - As you are redirecting to another page, you have to "suppress" (stop) the natural onsubmit event.

In other words, you have to return false on the onsubmit event, otherwise the redirection (to Random.html) won't have a chance to work because the submit event will kick in (and sedn the user to the action page of the form) before the redirection works.

So change <form name=login onsubmit="check_info()"> to:

<form name=login onsubmit="return check_info()">

And add a return false; to the end of check_info().

The full code should be as follows:

<script type="text/javascript">
    function check_info(){
        var username = document.login.username.value;
        var password = document.login.password.value;

        if (username=="" || password=="") {
            alert("Please fill in all fields")
        } else {
            if(username=="test") {
                if (password=="test") {
                    window.location.href = "Random.html"; // ------ CHANGED THIS LINE
                } else {
                    alert("Invalid Password")
                }
            } else { 
                alert("Invalid Username")
            }
        }
        return false; // ------------------------ ADDED THIS LINE
    }
</script>

And the HTML (only the onsubmit changed):

<form name="login" onsubmit="return check_info()">
    Username:
    <input type="text" name="username" id="username"/>
    <br>
    Password:
    <input type="password" name="password" id="password"/>
    <br>
    <br>
    <input type="submit" value="Login"/>
</form>

JSFiddle demo here.

Hi @SongJaeGu if this or any answer has solved your question please consider [accepting it](http://meta.stackexchange.com/a/5235/219205) by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. — acdcjunior, Sep 28 '14 at 21:35

score 0 · Answer 3 · answered Sep 23 '14 at 19:53

The new way of doing this - set a breakpoint at the line

if(username=="test") {

And step through it to find what the problem is.

The old school way of doing this (from back before we had Javascript debuggers) is to alert messages in each of those blocks, and figure out why you step into that block to begin with. It's a lot more cumbersome than the debugger, but sometimes you may need to resort to old school hacks.

onSubmit button won't load location

3 Answers3