skip to Main Content

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

5

Answers


  1. // 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. try using:

    function login(){
       window.location.href="createGame.html";
    }
    
    Login or Signup to reply.
  3. 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. 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. 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