I am trying to build a simple login form with the predefined username and Password and I want to validate user input matches with username & password that I specified.
If the user enters wrong username or password I want to display an alert message. I tried to write possible conditions, but I am not getting the alert message even I entered the wrong password.
I am new to development and need your support to learn this.
<!DOCTYPE html>
<html>
<head>
<title> javascript-validataion </title>
<link rel="stylesheet" href="java.css" type="text/css">
<script type="text/javascipt">
function check_info()
{
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
if(username == "user1" && password == "123456")
{
alert("Login Successful");
return false;
}
else
{
alert("checkpassword");
}
}
</script>
</head>
<body>
<form action="submission.html" method="post" onclick="return
check_info()";>
username:<input type="text" name="username" id="username" /><br>
</br>
password:<input type="text" name="password" id="password"/><br>
</br>
<input type="button" value="login" id="loginbtn"/>
</form>
</body>
</html>
You have 2 problems in provided example:
Typo in <script type="text/javascipt"> it should be <script type="text/javascript">
Use onclick in button <input type="button" value="login" id="loginbtn" onclick="return check_info()"/>
You cannot do this only with JS. You have to build a server side (e.g. with PHP or C#) page for querying the typed username using AJAX and then check the response. Also, you have to check the username existance on the confirmation before you update the new racord to the database for security reasons.
I suggest you to learn about AJAX and JQuery. If you are new, I suggest you to write simpler pages (e.g. a calculator or rock-paper-scissors game) for practise.
Related
i made a script that is basicly just a form where you have to put in a password to go to the admin page. when i was doublechecking everything i noticed that can see the script including the password with inspect element. Im still learning php, javascript, html and css and i cant figure out how to put that password in a seperate .js file and link it back to my password code.
This is the code i wrote. i was hoping if someone could learn me how to store the password in a seperate file and link it back
<h3>admin<h3>
<form>
<label for="pswd">Enter your password: </label>
<input type="password" id="pswd">
<input type="button" value="Submit" onclick="checkPswd();" />
</form>
<!--Function to check password the already set password is Kra5313-->
<script type="text/javascript">
function checkPswd() {
var confirmPassword = "kra5313";
var password = document.getElementById("pswd").value;
if (password == confirmPassword) {
window.location="/admin/Stored Ips.php";
}
else{
window.location="/sub pages/you_tried.php";
}
}
</script>
Everything inside the script tags is client-side, and the user will see it. That is why there is a backend and a database. To hide things from the user.
So I have my code and it works when I simply run it in a browser (such as chrome) but what I am doing is making a chrome extension and chrome extensions do not allow the javascript to be embedded in the html but I need a way to add the javascript to the page. I can link a source of js like I have done in my code and this will work with the extension requirements that I need but I have a forum that I need to get the data from and I do not know how to do that without adding an onClick event inside the html tag. Here is my code
document.getElementById("submitButton").onclick = check(this.form);
/*function to check userid & password*/
function check(form){
/*the following code checks whether the entered userid and password are
matching*/
if(form.username.value == "SeeGreatness" && form.password.value ==
"SeeGreatness")
{
window.open('https://www.google.com'); /*opens the target page while Id & password matches*/
}
else
{
alert("Error Password or Username");/*error*/
}
}
that is for the javascript it is in the same folder as everything else and its file name is login.js
next up I have some html and css (the css is not of any concern) its file name is login.html and here it is...(you may need to scroll)
`<html>
<head>
<title>Login page</title>
</head>
<body>
<h1 id="h1">simple login page</h1>
<form id="login" name="login">
<p>Username</p>
<input type="text" name="username"/>
<p>Password</p>
<input type="password" name="password"/>
<input id="submitButton" value="Login" type="button"/>
<input type="reset" value="Cancel"/>
</form>
<label>
<script src="login.js"></script>
<style src="login.css"></style>
</label>
</body>
</html>`
so I'm just not sure how you send the information from the form to the js file for it to "verify" the password and username
(please note that this (as in the login page's security) is just for a concept and won't be published as that's very insecure)
thanks
I am trying to make a page that contains a login form. I got its coding from a website (someone had given that), well in the coding the username and password is given for compare (which can be seen by anyone, who opens the html codes), that's why i want that how the value of username and password can be compared in java-script from an external txt file or html file.
Kindly see the coding in order to better understand my problem. In coding "ABC" and "123" are username and password.
<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 = "ABC" && form.pswrd.value == "123")
{
window.open('target.html')/*opens the target page while Id & password matches*/
}
else
{
alert("Error Password or Username")/*displays error message*/
}
}
</script>
</body>
Technicly, you can load by AJAX a txt/xml or json file and read the data from that.
However, I strongly recommend that you make the user/password check on the server side as if you do it in javascript, it won't be secure at all as anyone could read them in less than 5 seconds !!!
I need to open a .html file upon password being entered correctly, the file is in the same folder. I have gotten most of it to work but it now says that my password function is not a function. Any help would be much appreciated
my code-
<html>
<head>
<title>Login</title>
</head>
<body onLoad="SetTime()">
<form name="form1">
<label for="password">Enter Password</label>
<input type="password" name="Password" id="password">
<input type="button" onClick="Password()" value="Submit" id="btn">
</form>
<script>
var password = "JavaScript";
var userInput = document.getElementById("password").value;
function SetTime()
{
setTimeout("closeWindow()",120000);
}
function closeWindow(){
window.close();
}
function Password() {
if (userInput == "JavaScript") {
window.open("file:///outcome 3.html")
}
}
</script>
</body>
</html>
First. I hope you know this is not secure. Second, your issues is the fact that your element id/name and function names are the same. Change one of them.
Third, you only read the value when the page is loaded. It does not magically get updated, you need to read the value of the textbox inside of the function.
You cannot open html file like this "file:///outcome 3.html". Please check path of login html and path of redirected html --> define relative path to open.
Hello I need help with a simple JavaScript log in form. I am building a small website for me and my classmates. I want it to be able to redirect each user to a specific page when a corresponding passcode is entered.
I know it is unsafe but we don't plan on keeping valuable information on the site. I don't know about MSQL and don't even wish to use it. The code works at this level but am unable to add users since I don't understand JavaScript. Thanks in advance.
/*here is the code i got so far*/
<title>
Enter Passcode to proceed
</title>
<h1 style="font-family:Comic Sans Ms; text-align="center"; font-size:20pt; color:#00FF00;>
</h1>
<form name="login">
Passcode: <input type="text" name="userid"/>
<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 */
{
/*the following code checkes whether the entered userid is correct*/
if(form.userid.value == "JohnDoe")
{
window.open("johndoe.php")/*opens the target page while Id */
}
else
{
alert("Invalid Passcode, please try again!")/*displays error message*/
}
}
</script>
Here is your current if condition that contains a search for a user. Your else condition tells the user the passcode was invalid. Between them add some else if's. Also, boo for comic sans and also there are quite a few more methods that would work. You could, for example, post the form to a server-side script with hardcoded users there, and the viewer wouldn't be able to view source to get the info.
if(form.userid.value == "JohnDoe")
{
window.open("johndoe.php")/*opens the target page while Id */
}