How would I adapt this code to run without using the form, but the prompt() method instead? By including a prompt instead of a form to ask for user input.
<html>
<head>
<title>Login page</title>
</head>
<body>
<h1 style="font-family:Comic Sans Ms;text-align="center";font-size:20pt; color:#00FF00;>Simple Login Page</h1>
<form name="login">
Username<input type="text" name="userid"/>
Password<input type="password" name="pswrd"/>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)/*function to check userid & password*/ {
/*the following code checkes whether the entered userid and password are matching*/
if(form.userid.value == "myuserid" && form.pswrd.value == "mypswrd") {
window.open('target.html')/*opens the target page while Id & password matches*/
}
else {
alert("Error Password or Username")/*displays error message*/
}
}
</script>
</body>
</html>
Thanks!
Related
I'm working on a simple login page. When the user types in the correct username and password it redirects them to another page. So far I have tried:
window.location, window.location.replace window.href and window.open the only one that works is window.open, however I'm trying to make is so it does not open a newtab, it just redirects them to another page.
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="master.css">
<title>Day Four</title>
</head>
<body>
<h1>Log In</h1>
<form onsubmit="valid()">
<label for="username">Username:</label>
<input id = 'user-name' type="text" name="" value="" required>
<label for="password">Password:</label>
<input id = 'pass-word' type="password" name="" value="" required>
<input id = 'log-in'type="submit" name="" value="Log In">
</form>
</div>
</body>
<script src="mainJs.js" charset="utf-8"></script>
</html>
JS
function valid(){
var username = document.querySelector('#user-name').value;
var password = document.querySelector('#pass-word').value;
if(username === 'test' && password === '1'){
window.open("gradebook.html")
}else{
alert("Wrong username or password")
}
}
Edit: I know it's not secure. I put the code that works window.open("gradebook.html") seeing how the other ones don't do anything.
I also don't get any errors in the console when using the other ones.
It looks like the problem was with the form tags. If I remove the form tags everything starts working as it should.
All you need to do is set window.location to the new URL.
document.querySelector("button").addEventListener("click", function(){
window.location = "http://cnn.com";
});
<button>Click Me</button>
I have the following page with a javascript file, when the user enters the wrong username/password the message "wrong username password" is output to page; however, the message does not stay on the page. For some reason the page gets refresh.
<html>
<head>
<script src="letmein.js"></script>
</head>
<body>
<h1 id="h1">JavaScript Test Page</h1>
<p id="p">Click the link to login into the application</p>
<p>login</p>
<form id="myForm" name="myForm" onSubmit="letmein();">
<p>username:
<input type="text" name="username">
</p>
<p>password:
<input type="text" name="password">
</p>
<input type="submit" value="Login">
</form>
<p id="hidden"></p>
clear
</body>
</html>
javascript file
var username = "admin";
var password = "letmein";
var counter = 0;
//login form authentication
function letmein() {
var formUser = document.forms['myForm']['username'].value;
var formPass = document.forms['myForm']['password'].value;
if(formUser === username && formPass === password) {
window.open("file:///home/jorge/usersearch.html");
}
counter++;
document.getElementById("hidden").innerHTML = "Wrong username or password!"
if(counter === 3) {
alert("Access Denied!");
}
}
//close window
function closeWindow() {
close();
};
I think clicking the button submits the form. You need to return false on onSubmit in order to avoid submitting the form.
<html>
<head>
<script src="letmein.js"></script>
</head>
<body>
<h1 id="h1">JavaScript Test Page</h1>
<p id="p">Click the link to login into the application</p>
<p>login</p>
<form id="myForm" name="myForm" onSubmit="letmein(); return false;">
<p>username:
<input type="text" name="username">
</p>
<p>password:
<input type="text" name="password">
</p>
<input type="submit" value="Login">
</form>
<p id="hidden"></p>
clear
</body>
</html>
You need to stop the form's default action. For example:
function letmein(e) {
if(validationFails) {
e.preventDefault(); //this will stop the form from submitting
}
}
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>
How do I create a login page that checks for a correct password on the client side and goes to the next screen if the password is correct?
Here is my attempt:
<html>
<p> Enter Username and Password </p>
<FORM action="file:///android_asset/www/Browse.html" method="post">
<P>
<LABEL for="firstname">Username </LABEL>
<INPUT type="text" id="Username"><BR>
<LABEL for="lastname">Password </LABEL>
<INPUT type="text" id="Password"><BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
</FORM>
</html>
<html>
<head>
<title>Login page</title>
</head>
<body>
<h1>Simple Login Page</h1>
<form name="login">
Username<input type="text" name="userid"/>
Password<input type="password" name="pswrd"/>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form) { /*function to check userid & password*/
/*the following code checkes whether the entered userid and password are matching*/
if(form.userid.value == "myuserid" && form.pswrd.value == "mypswrd") {
window.open('target.html')/*opens the target page while Id & password matches*/
}
else {
alert("Error Password or Username")/*displays error message*/
}
}
</script>
</body>
</html>
Doing password checks on client side is unsafe especially when the password is hard coded.
The safest way is password checking on server side, but even then the password should not be transmitted plain text.
Checking the password client side is possible in a "secure way":
The password needs to be hashed
The hashed password is used as part of a new url
Say "abc" is your password so your md5 would be "900150983cd24fb0d6963f7d28e17f72" (consider salting!). Now build a url containing the hash (like http://yourdomain.com/90015...f72.html).
I'm trying to make a password field for a webpage. So far I have:
<form name="PasswordField" action="">
Password:
<input type="password" name="password">
<input type="button" value="Log in">
</form>
Pathetic I know. It doesn't have to be fancy, I just need it to "get" the password from the textbox and match it against the password for the page. I'm assuming I can use an if-else?
*Code for get password from textbox when the "Log in" button is pressed here*
if (password = "rawr")
{alert('Correct!')}
else
{alert('Wrong Password')}
Sadly I've been fooling with this for hours. I tried functions, too, and that didn't seem to work (for me) either.
If you go that route, you need to put the validation inside a function that gets called in the onclick event of your button. Also to access the password <input node in js, you can give it an id and use document.getElementById(id). Also, = is an assignment operator. Use == for comparison :)
<head>
<script type="text/javascript">
function isValid(){
var password = document.getElementById('password').value;
if (password == "rawr")
{alert('Correct!')}
else
{alert('Wrong Password')}
}
</script>
</head>
<form name="PasswordField" action="">
Password:
<input type="password" id="password" name="password">
<input type="button" value="Log in" onclick="isValid();">
</form>
Or an even easier way would be to pass the password DOM node as an argument to the function:
<head>
<script type="text/javascript">
function isValid(myNode){
var password = myNode.value;
if (password == "rawr")
{alert('Correct!')}
else
{alert('Wrong Password')}
}
</script>
</head>
<form name="PasswordField" action="">
Password:
<input type="password" id="password" name="password">
<input type="button" value="Log in" onclick="isValid(this);">
</form>
Is this what you are looking for?
document.forms['PasswordField'].elements['password'].value
I used jquery and here's my solution:
<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[name='login']").click(function() {
var s = $("input[name='password']").val();
if(s == "rawr") {alert('Correct!')}
else {alert('Wrong Password')}
});
});
</script>
</head>
<body>
<form name="PasswordField" action="">
Password:<input type="password" name="password">
<input type="button" value="Log in" name="login">
</form>
</body>
</html>