Twitter Bootstrap Question posted in

window.location doesn't redirect to another html page – Twitter bootstrap

I am using this login page:http://csshtmljs.com/bootstrap-snippets.php?code-snippets=904&q=Bootstrap+snippet+DeyNote+like+login.
I wrote javascript functions for the login and the register buttons that should redirect to the appropriate page, but it doesn’t work.
Here is login.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!--  This file has been downloaded from bootdey.com    @bootdey on twitter -->
    <!--  All snippets are MIT license http://bootdey.com/license -->
    <!-- 
    	The codes are free, but we require linking to our web site.
    	Why to Link?
    	A true story: one girl didn't set a link and had no decent date for two years, and another guy set a link and got a top ranking in Google! 
    	Where to Put the Link?
    	home, about, credits... or in a good page that you want
    	THANK YOU MY FRIEND!
    -->
    <title>DeyNote like login - Bootdey.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
    	body{
    margin-top:20px;
    color:#fff;
}

.login-page {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    background: #3ca2e0;
    text-align: center;
    color: #fff;
    padding: 3em;
}

.user-avatar {
    width: 125px;
    height: 125px;
}

.login-page h1 {
    font-weight: 300;
}

.login-page .form-content {
    padding: 40px 0;
}

.login-page .form-content .input-underline {
    background: 0 0;
    border: none;
    box-shadow: none;
    border-bottom: 2px solid rgba(255,255,255,.4);
    color: #FFF;
    border-radius: 0;
}
.login-page .form-content .input-underline:focus {
    border-bottom: 2px solid #fff;
}    

.input-lg {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 0;
}

.btn-info{
    border-radius: 50px;
    box-shadow: 0 0 0 2px rgba(255,255,255,.8)inset;
    color: rgba(255,255,255,.8);
    background: 0 0;
    border-color: transparent;
    font-weight: 400;
}

input[type='text']::-webkit-input-placeholder, input[type='password']::-webkit-input-placeholder { 
    color:    #fff;
}
input[type='text']:-moz-placeholder, input[type='password']:-moz-placeholder { 
    color:    #fff;
}
input[type='text']::-moz-placeholder, input[type='password']::-moz-placeholder { 
    color:    #fff;
}
input[type='text']:-ms-input-placeholder, input[type='password']:-ms-input-placeholder { 
    color:    #fff;
}
    </style>
</head>
<body>
<div class="container bootstrap snippet">
    <div class="row login-page"> 
        <div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4"> 
    		<img src="http://ani-theme.strapui.com/images/flat-avatar.png" class="user-avatar"> 
    		<h1>Bootdey.com</h1> 
    		<form role="form" class="ng-pristine ng-valid"> 
    			<div class="form-content"> 
    				<div class="form-group"> 
    					<input type="text" class="form-control input-underline input-lg" placeholder="Email"> 
    				</div> 
    				<div class="form-group"> 
    					<input type="password" class="form-control input-underline input-lg" placeholder="Password"> 
    				</div> 
    			</div> 
    			<button class="btn btn-info btn-lg" onclick="login()">
                    Log in
    			</button> &nbsp; 
    			<button type="submit" class="btn btn-info btn-lg">Register</button>
    		</form> 
    	</div> 
    </div>
</div>

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="login.js">
	
</script>
</body>
</html>

login.js:

function login(){
window.location="createGame.html";
}

There is no error but the page is not replaced.
I will appreciate your help.
Thanks

Tags:

5

Answers


  1. 0

    // similar behavior as an HTTP redirect

    window.location.replace("http://stackoverflow.com");

    // similar behavior as clicking on a link

    window.location.href = "http://stackoverflow.com";
    Login or Signup to reply.
  2. 0

    try using:

    function login(){
   window.location.href="createGame.html";
}
    Login or Signup to reply.
  3. 0

    Your login button is implicitly submitting the form, as you can see in the below simplified example. For demonstration purposes, I have added an “action” to the form, which causes the ‘submit’ to go to an example site. Note that this is NOT the redirect you’re attempting; I’ve changed that function here to contain only a console.log; it fires, but then the form submit takes over. If the form action is omitted as in your original code, the page “redirects” to an empty document.

    function login() {
  // window.location="http://example.com"
  console.log("redirect here");
}
    <div class="container bootstrap snippet">
  <div class="row login-page">
    <div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
      <form action="http://foo.com" role="form" class="ng-pristine ng-valid">
        <div class="form-content">
          <div class="form-group">
            <input type="text" class="form-control input-underline input-lg" placeholder="Email">
          </div>
          <div class="form-group">
            <input type="password" class="form-control input-underline input-lg" placeholder="Password">
          </div>
        </div>
        <button class="btn btn-info btn-lg" onclick="login()">
          Log in
        </button> &nbsp;
        <button type="" class="btn btn-info btn-lg">Register</button>
      </form>
    </div>
  </div>
</div>

    Removing the <form> tag is one way to avoid this issue (if you are handling all the form actions through javascript, the <form> is unnecessary.) Here the ‘login()’ function will perform the redirect:

    function login() {
  console.log("redirect here. ");
  window.location="http://example.com";
}
    <div class="container bootstrap snippet">
  <div class="row login-page">
    <div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
      <div class="form-content">
        <div class="form-group">
          <input type="text" class="form-control input-underline input-lg" placeholder="Email">
        </div>
        <div class="form-group">
          <input type="password" class="form-control input-underline input-lg" placeholder="Password">
        </div>
      </div>
      <button class="btn btn-info btn-lg" onclick="login()">
        Log in
      </button> &nbsp;
      <button type="" class="btn btn-info btn-lg">Register</button>
      </form>
    </div>
  </div>
</div>

    Alternatively, you could pass the submit event on to the login function and use event.preventDefault to prevent the form from submitting; set the form action to the submit function; or use type="button" to override the button’s default type="submit" (hat tip to @MikaelLennholm for that last one).

    As has been exhaustively demonstrated in other answers, it doesn’t matter at all whether you set window.location, window.location.href, window.location.replace() or .assign(); any of them will work.

    Login or Signup to reply.
  4. 0

    It’s because your button submits the form, which overrules the location change.

    <button> tags have type="submit" by default so you can fix this by setting type="button" on your login button so that it’s no longer a submit button:

    <button type="button" class="btn btn-info btn-lg" onclick="login()">

    I’m assuming you intend to have the form be submitted by the “register” button (since you explicitly set type="submit" on it) so I don’t think the suggestions of removing the form or set its action to your login page are appropriate solutions in your case.

    Login or Signup to reply.
  5. 0

    You are using form. So you need to give “action”.
    It is working fine. Check the codepen I recreated and works fine.

    codepen demo

    <form role="form" action="login()" class="ng-pristine ng-valid">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search