window.location doesn't redirect to another html page
Question
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> <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
solution1
1 2017-05-17 14:33:44
// 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";
solution2
1 2017-05-17 14:57:14
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.
solution3
0 2017-05-17 14:54:21
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> <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> <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.
solution4
0 2017-05-17 14:58:37
You are using form. So you need to give "action". It is working fine. Check the codepen I recreated and works fine.
<form role="form" action="login()" class="ng-pristine ng-valid">
solution5
-1 2017-05-17 14:38:16
try using:
function login(){
window.location.href="createGame.html";
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.