I added a breakpoint at login function. When I submit the form, the login function should be called; but it's not called. And when I log in, the page doesn't redirect to window.location. I want the page to be redirected if the login credentials are the same as the one in local storage. I know we shouldn't validate your code client side. But for now, let's just ignore that.
var db = window.localStorage;
function signUp() {
var signupFormDt = document.querySelector('#signup-form');
var email = signupFormDt.querySelector('input[name="email"]');
var password = signupFormDt.querySelector('input[name="password"]');
var userName = signupFormDt.querySelector('input[name="name"]');
db.setItem(userName.name, userName.value);
db.setItem(email.name, email.value);
db.setItem(password.name, password.value);
}
function login() {
var loginFormDt = document.querySelector('#login-form');
var logEmail = loginFormDt.querySelector('input[type="email"]');
var logPass = loginFormDt.querySelector('input[type="password"]');
if (db.email == logEmail.value && db.password == logPass.value) {
window.location = 'http://www.google.com';
} else {
window.location = "http://www.google.com";
}
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--Link to StyleSheet-->
<link rel="stylesheet" href="../css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<h1>
<a href="#"></a>
</h1>
<nav>
<ul class="clearfix">
<li>
<a href="#">
<h4>Home</h4>
</a>
</li>
<li>
<a href="../html/about.html">
<h4>About</h4>
</a>
</li>
<li>
<a href="#">
<h4>Contact</h4>
</a>
</li>
<li>
<a href="#">
<h4 id="social">Social</h4>
<div class="arrow"></div>
<ul>
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
<li>Snapchat</li>
<li>Tumblr</li>
</ul>
</a>
</li>
</ul>
<!-- end of ul of main nav-->
</nav>
<!--end of nav-->
</div>
<!--end of container-->
</header>
<main>
<section>
<h3>login Page</h3>
<div id="login">
<p><a href="../html/index.html" title="link to home page">Myselfie Tech</a></p>
<form method="Post" id="login-form">
<p>
<input type="email" name="email" id="email" placeholder="email" required>
</p>
<p>
<input type="password" name="password" id="password" placeholder="password" required>
</p>
<p>
<button type="submit" onsubmit="login()">Submit Query</button>
</p>
<p>
<button onclick="window.location='../html/index.html'">Back</button>
</p>
</form>
</div>
</section>
</main>
<footer>
<p>
<center><small>©Copyright 2017 programmers inc.</small></center>
</p>
</footer>
<!--Link to Javascript-->
<script src="../javascript/scripts1.js"></script>
</body>
</html>
ranieribt
1,3161 gold badge16 silver badges33 bronze badges
asked Aug 3, 2017 at 20:30
user8413944
2 Answers 2
A button element does not have an onsubmit attribute. You should put that attribute on the form tag for it to work. Also make sure that the form submission is cancelled, since you want to control the navigation differently, with window.location:
Add
return:<form onsubmit="return login();">Add
return false, and.hrefafterlocation:function login() { var loginFormDt = document.querySelector('#login-form'); var logEmail = loginFormDt.querySelector('input[type="email"]'); var logPass = loginFormDt.querySelector('input[type="password"]'); if (db.email == logEmail.value && db.password == logPass.value) { window.location.href = 'http://www.google.com'; } else { window.location.href = "http://www.google.com"; } return false; // <------ }
answered Aug 3, 2017 at 20:33
trincot
357k38 gold badges282 silver badges340 bronze badges
Sign up to request clarification or add additional context in comments.
3 Comments
huysentruitw
Also, explicitly return false in that login handler to make it clear you want to cancel the default submit behavior.
trincot
OK, I added some more suggestions, since you seem not interested in submitting the form (so why
method = "post"?), but only to relocate.Try using input tag instead of button for submit
something like
<input id="clickMe" type="button" value="Submit Query" onclick="login()" />
2 Comments
Ali
@Icode You can do that using AJAX as well since you have validation logic before posting the data
lang-js