CODEWITHSUNDEEP
javascripthtmlformsonsubmit
SongJaeGu
SongJaeGu

Reputation: 87

onSubmit button won't load location

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>

Upvotes: 2

Views: 183

Answers (3)

acdcjunior
acdcjunior

Reputation: 135872

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.

Upvotes: 1

Tim
Tim

Reputation: 4099

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.

Upvotes: 0

tymeJV
tymeJV

Reputation: 104805

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)

Upvotes: 2

Related Questions