Javascript just doesn't redirect, reloads index.html instead

Question

So, I am trying to make a small dummy login form, that redirects me onto another page when I click a button. But it just doesn't, instead it reloads the index.html again.

HTML (edit):

<div class="modal fade" id="login" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="" class="form-horizontal">
                    <div class="modal-header">
                        <h4>Log In</h4>
                    </div> <!-- End of Modal Header -->
                    <div class="modal-body">

                        <div class="form-group">

                            <label for="login-name" class="col-lg-2 control-label">Username</label>
                            <div class="col-lg-10">
                                <input type="text" placeholder="Enter Your Username" class="form-control" id="login-name">
                            </div>
                        </div> <!-- End of -->

                        <div class="form-group">

                            <label for="login-name" class="col-lg-2 control-label">Password</label>
                            <div class="col-lg-10">
                                <input type="password" placeholder="Enter Your Password" class="form-control" id="login-name">
                            </div>
                        </div> <!-- End of -->
                        <div class="form-group">

                            <button class="btn btn-default pull-right btn-large" id="loginBtn" style="margin-right: 20px;">Login</button>

                        </div> <!-- End of -->

                    </div> <!-- End of Modal Body -->
                    <div class="modal-footer">
                        <a href="#" class="btn btn-default btn-xs">Forgot Password</a>
                        <a href="#" class="btn btn-default btn-xs">Sign Up</a>
                        <a href="#" class="btn btn-default btn-xs" data-dismiss="modal">Close</a>
                    </div> <!-- End of Modal footer -->
                </form>
            </div> <!-- End of Modal Content -->
        </div> <!-- End of Modal Dialog -->
    </div> <!-- End of Modal Fade LOGIN -->

JS:

window.addEventListener("load",init, false);

function init() {
    var loginBtn = document.getElementById("loginBtn");
    loginBtn.addEventListener("click", checkLogin, false);
}

function checkLogin(e) {
    alert("FIRED");
    if(1>0){
        window.location.href = "//www.google.com";
    }
}

At first I thought maybe it didn't redirect because it didn't call the function at all, but it does. The alert is fired every time, but then it just reloads the page.

It also relocates just fine when I tell it to do it in the init function. Where am I going wrong?

Answer 1

The default behavior of a <button> element is to perform a submit action. Since you're not cancelling it, the form is being submitted and the change you're making to location.href is being ignored. Since you haven't specified a value for action="" , the submit is just causing the current page to refresh.

Three different ways you can avoid this:

1. Specify type="button" on the button:

<button class="btn btn-default pull-right btn-large" 
        id="loginBtn" style="margin-right: 20px;" type="button">Login</button>

2. Use an input with type="button" :

<input class="btn btn-default pull-right btn-large" value="Login"
        id="loginBtn" style="margin-right: 20px;" type="button" />

3. Prevent the default behavior in your event handler:

function checkLogin(e) {
    e.preventDefault();

    alert("FIRED");
    if(1>0){
        window.location.href = "//www.google.com";
    }
}

Answer 2

You can also use a simplier way which I prefer window.location.href in the button tag like this:

<button class="Whatever you want to call it" onclick="window.location.href='The_Page_You_Want_To_Redirect_To.html'"></button>

And then you can just style the button with CSS as you want it