Sorry guys, first time playing around with this. Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<title>SuM BUTtonsS DOe</title>
<link rel="stylesheet" href="buttons.css"/>
</head>
<body>
<p>Please enter the password</p>
<form id="enter" onSubmit="javascript:passCheck()">
<input id="password" type="password" placeholder="Password">
</form>
<p id="incorrect"><em>INCORRECT PASSWORD</em></p>
<script type="text/javascript">
function passCheck() {
var input = document.getElementById('password').value;
if (input == 'herro') {
window.alert("IT WORKS!!");
}
else {
var incorrect = document.getElementById('incorrect');
incorrect.style.display = "block";
}
}
</script>
</body>
</html>
When I enter the wrong password, INCORRECT PASSWORD comes up, but only for a fraction of a second. Then it's gone again. No idea why.
UPDATE:
<!DOCTYPE html>
<html>
<head>
<title>SuM BUTtonsS DOe</title>
<link rel="stylesheet" href="buttons.css"/>
</head>
<body>
<p>Please enter the password</p>
<form id="enter" onSubmit="javascript:passCheck()">
<input id="password" type="password" placeholder="Password">
</form>
<p id="incorrect"><em>INCORRECT PASSWORD</em></p>
<script type="text/javascript">
function passCheck() {
var input = document.getElementById('password').value;
if (input == 'herro') {
window.alert("IT WORKS!!");
}
else {
var incorrect = document.getElementById('incorrect');
incorrect.style.display = "block";
return false;
}
}
</script>
</body>
</html>
On submit, the form will trigger the default action, which in this case is to submit the contents to the same page (for lack of an action property).
So what you're seeing is the JavaScript runs and changes the style to show the error message, then the page reloads.
To ensure the page doesn't reload put return false at the end of passCheck. Better would be to use addEventListener and event.preventDefault(), but that's a little bit more involved.
<p>Please enter the password</p>
<form id="enter" onSubmit="passCheck(); return false;">
<input id="password" type="password" placeholder="Password">
<input type="submit" value="Submit"/>
</form>
<p id="incorrect" style="display: none"><em>INCORRECT PASSWORD</em></p>
<script type="text/javascript">
function passCheck() {
var input = document.getElementById('password').value;
if (input == 'herro') {
window.alert("IT WORKS!!");
}
else {
var incorrect = document.getElementById('incorrect');
incorrect.style.display = "block";
}
}
</script>
Related
OK so I have a form that I check to see if the user enters in a username in the username field. On top of that i also want to know what button what clicked, really im looking to see when the logout button is clicked. It seems to me that the addEventListener isn't registering the 'click' value when the form is submitted. both the buttons and the buttonLength have the right values when I run it with Firefox debugger. So my question is, how do I check the addEventListener value or if its getting passed? looking for some insight on what I'm doing wrong.
<!DOCTYPE html>
<html>
<head>
<title>Not empty</title>
</head>
<body>
<script>
function ValidateForm(frm){
var buttons = document.getElementsByName('adam');
var buttonsLength = buttons.length;
for (var i = 0; i < buttonsLength; i++){
buttons[i].addEventListener('click', clickResponse, false);
};
function clickResponse(){
if(this.id == "logout"){
alert(this.id);
}else {
alert("not logout:" + this.id);
};
};
if (!frm.UserName.value) {
alert("You must enter your username.");
frm.UserName.focus();
return false;
}
return true;
}
</script>
<form method="post" action="test.html" onsubmit="return ValidateForm(this)">
<input type="input" name="UserName" value="">
<input type="password" name="Password" value="">
<button name="adam" id="login">login</button>
<button name="adam" id="sendMe">send me my password</button>
<button name="adam" id="logout">logout</button>
<form>
</body>
Maybe I'm wrong but I think you try to do the following:
<!DOCTYPE html>
<html>
<head>
<title>Not empty</title>
</head>
<body>
<form method="post" name="formname" action="test.html">
<input type="input" id="username" name="userName" value="">
<input type="password" id="password" name="Password" value="">
<button type="button" name="adam" id="login">login</button>
<button type="button" name="adam" id="sendMe">send me my password</button>
<button type="button" name="adam" id="logout">logout</button>
<form>
<script>
var buttons = document.getElementsByName('adam');
var buttonsLength = buttons.length;
for(var i=0;i<buttonsLength; i++){
buttons[i].addEventListener('click', clickResponse, false);
};
function clickResponse(){
var u, p;
u=document.getElementById('username');
p=document.getElementById('password');
switch(this.id) {
case 'logout':
alert('Logout '+this.id);
break;
case 'login':
if(u.value.length==0 ||
p.value.length==0) {
alert("Please enter your unsername and password.");
if(u.length==0) {
u.focus();
} else {
p.focus();
}
} else {
alert('submit');
//document.forms.formname.submit();
}
break;
case 'sendMe':
if(u.value.length==0) {
alert("Please enter your username.");
u.focus();
return false;
} else {
alert('submit');
//document.forms.formname.submit();
}
break;
}
};
</script>
</body>
So, you need to assign listeners before click, then I guessed you want to capture click check button id (command to execute) and then check if user and pass are fullfilled depending the button clicked, if so then submit the form... I've changed your code but I think is what you're looking for.
Hope it helps!!!
Your code is a little messy and hard to understand exactly what you need.
That being said, you should use onclick attributes to bind the buttons to 3 separate functions.
Inside those functions you can get ahold of any dom nodes you need to preform login/logout/sendMe functionality.
Like so:
<!DOCTYPE html>
<html>
<head>
<title>Not empty</title>
</head>
<body>
<script>
function login(){
alert('login function');
// do what you need to here to login
var username = document.getElementsByName('input-username').value;
var password = document.getElementsByName('input-password').value;
if (!username){
alert("You must enter your username.");
}else if (!password){
alert("You must enter your password.");
}
}
function sendMe(){
alert('sendMe function');
// sendMe functionality here
}
function logout(){
alert('logout function');
// logout functionality here
}
</script>
<form method="post" action="test.html">
<input id='input-username' type="input" name="UserName" value="" />
<input id='input-password' type="password" name="Password" value="" />
<button id="login" onClick="login()">login</button>
<button id="sendMe" onClick="sendMe()">send me my password</button>
<button id="logout" onClick="logout()">logout</button>
<form>
</body>
I have been working on this really simple login, where all i want to do is say, if the password is "apple" and password is "123" then link me to another page when i click submit button.
I gave up on the submit button linking portion but i still don't understand why my code won't register, everything looks right to me
<!DOCTYPE html>
<html>
<body>
<form name="loginForm">
<input type="text" name="username" placeholder="Username" value=""/>
<input type="password" name="password" placeholder="Password" value=""/>
<input type="button" name="submit" value="Login" onclick="validate()" />
</form>
<script type="text/javascript">
function validate() {
var user = document.loginForm.username.value;
return user;
var pass = document.loginForm.password.value;
return pass;
if ( (user=="apple") && (pass=="123") ) {
document.write("It worked");
} else {
document.write("Wrong Password");
}
}
</script>
</body>
</html>
Suggestions:
return keyword will exit the function, so the code after return won't be reached. To remove the two 'return' statement is the first step.
document.write will clear the page after document is loaded. You probably need alert function
try using document.getElementById/getElementByName (which is better) instead of document.loginForm...
It is also better to put onsubmit in the form tag (fired after type=submit button is clicked) instead of onclick event for button.
It is better to put Javascript inside the HTML head tag.
Below is a much better/working version:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function validate() {
var user = document.getElementById("username").value;
var pass = document.getElementById("password").value;
if ( (user=="apple") && (pass=="123") ) {
alert("It worked");
return true;
} else {
alert("Wrong password");
return false;
}
}
</script>
</head>
<body>
<form action="" onsubmit='javascript:return validate()'>
<input type="text" id="username" placeholder="Username" value=""/>
<input type="password" id="password" placeholder="Password" value=""/>
<input type="submit" value="Login" />
</form>
</body>
</html>
Hey there I know it's probably an easy question but I've a problem with my Login/Register in JavaScript. I'm storing the users data via localStorage and when I try to login he always returns my alert message, that the typed in data is wrong.
EDIT: storedName is undefined but password isn't. I still don't get it..
EDIT: Problem solved. Thanks to Hank! Solution is in the comments.
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Learning JavaScript</title>
</head>
<body>
<form id="register-form">
<input id="name" type="text" placeholder="Name" value=""/>
<input id="pw" type="password" placeholder="Password" value=""/>
<input id="rgstr_btn" type="submit" value="get Account" onClick="store()"/>
</form>
<form id="login-form">
<input id="userName" type="text" placeholder="Enter Username" value=""/>
<input id="userPw" type="password" placeholder="Enter Password" value=""/>
<input id="login_btn" type="submit" value="Login" onClick="check()"/>
</form>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="login.js"></script>
</body>
</html>
And here is my JavaScript code:
// Name and Password from the register-form
var name = document.getElementById('name');
var pw = document.getElementById('pw');
// storing input from register-form
function store() {
localStorage.setItem('name', name.value);
localStorage.setItem('pw', pw.value);
}
// check if stored data from register-form is equal to entered data in the login-form
function check() {
// stored data from the register-form
var storedName = localStorage.getItem('name');
var storedPw = localStorage.getItem('pw');
// entered data from the login-form
var userName = document.getElementById('userName');
var userPw = document.getElementById('userPw');
// check if stored data from register-form is equal to data from login form
if(userName.value !== storedName || userPw.value !== storedPw) {
alert('ERROR');
}else {
alert('You are loged in.');
}
}
you have 2 issues:
1. "name" is a reserved word, it's gonna act goffy on you, change it to something else like name1 or nm or something.
2. don't use !==, != will do, you logic is faulty anyways, change it to this:
if(userName.value == storedName && userPw.value == storedPw) {
alert('You are loged in.');
}else {
alert('ERROR.');
}
But yeah, I know you are just practicing, but don't actually save usernames and passwords on the client side.
// entered data from the login-form
var userName=document.getElementById('userName');
var userPw = document.getElementById('userPw');
This is where the issue came to you.
You wanted to compare the entered values with the localStorage data. This is good but it should have been like this:
var userName = document.getElementById('userName').value;
var userPw = document.getElementById('userPw').value;
This is the correct way to get the value of the input field.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>logSign</title>
</head>
<body>
<form id="signup-form">
<input id="name1" type="text" placeholder="Username" value="" required>
<input id="pass1" type="password" placeholder="Password" value="" required>
<input id="signup_btn" type="submit" value="Signup">
</form>
<form id="login-form">
<input id="name2" type="text" placeholder="Username" value="" required>
<input id="pass2" type="password" placeholder="Password" value="" required>
<input id="login_btn" type="submit" value="Login">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#signup-form").submit(function () {
var nm1 = $("#name1").val();
var ps1 = $("#pass1").val();
localStorage.setItem("n1", nm1);
localStorage.setItem("p1", ps1);
});
$("#login-form").submit(function () {
var enteredName = $("#name2").val();
var enteredPass = $("#pass2").val();
var storedName = localStorage.getItem("n1");
var storedPass = localStorage.getItem("p1");
if (enteredName == storedName && enteredPass == storedPass) {
alert("You are logged in!");
}
else {
alert("Username and Password do not match!");
}
});
});
</script>
</body>
</html>
I am trying to perform a simple task. I want to validate a form or show a message stating 'Please complete the form!' What am I overlooking because all works except the message? How can I achieve this or am I simply just missing something? I have tried placing the script at the top and bottom, but I want on the bottom because I want the page to load faster and not pause for the JS.
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Index</title>
<!--[if it IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![end if]-->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form action="login.php" method="post" id="loginForm">
<fieldset>
<legend>Login</legend>
<div><label for="email">Email Address</label>
<input type="email" name="email" id="email" required></div>
<div><label for="password">Password</label>
<input type="password" name="password" id="password" required></div>
<div><label for="submit"></label><input type="submit" value="Login →" id="submit"></div>
</fieldset>
</form>
<script src="login.js"></script>
</body>
</html>
JS
function validateForm() {
'use strict';
var email = document.getElementById('email');
var password = document.getElementById('password');
if ( (email.value.length > 0) && (password.value.length > 0) ) {
return true;
} else {
alert('Please complete the form!');
return false;
}
}
function init() {
'use strict';
if (document && document.getElementById) {
var loginForm = document.getElementById('loginForm');
loginForm.onsubmit = validateForm;
}
}
window.onload = init;
If you want to use your own validation instead of the browser's built-in checking for required fields, remove the required attributes from your <input> tags.
DEMO
I'm trying to learn javascript through dummy scenarios, the below will not be used in a live context. All of the html pages are on my home server which is why i havent used http:// etc in the link.
I'm trying to have the below code take me to the "index" page if I type in the correct username and password and remain on the "home" page if I type it incorrectly but with an alert stating "Invalid Login". If I type in the correct username and password i'm redirected correctly however I'm also redirected to the index page if I enter in an incorrect username/password after the alert is correctly triggered.
How can I stop the index page loading for the wrong username/password? I'm sure its probably something simple i'm missing!
This is the html of the homepage
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="container">
<div id="loginbox">
<form id="login" action="home.html">
Username: <input type="text" name="user" id="user"><br>
Password: <input type="password" name="password" id="password"><br>
<input type="submit" value="Login" onclick="checkUserName()">
</form>
</div>
</div>
and this is the script
function checkUserName() {
var User = document.getElementById("user").value;
var Password = document.getElementById("password").value;
if (User === "user123" && Password === "password123") {
window.location = "index.html";
}
else {
alert("Invalid Login");
}
}
Cheers!
You dont want to submit the form in this case. You just need to invoke the js function on click of login. So use a normal button instead a submit.
<button onclick="checkUserName()">login</button>
When you use a submit button, the form will get submitted unless you are not preventing the default action by e.preventDefault() or by returning false from the js function being called
function checkUserName() {
var User = document.getElementById("user").value;
var Password = document.getElementById("password").value;
if (User === "user123" && Password === "password123") {
window.location = "index.html";
}
else {
alert("Invalid Login");
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="container">
<div id="loginbox">
<form id="login" action="home.html">
Username: <input type="text" name="user" id="user"><br>
Password: <input type="password" name="password" id="password"><br>
<button onclick="checkUserName()">login</button>
</form>
</div>
</div>