I have a problem. When I want to log in, I get "ERROR" every time, although I enter good login details.
I am completely beginner in JavaScript and HTML, so please bear with me :-)
There is code:
function login() {
var login = document.getElementById("login");
var password = document.getElementById("haslo");
var lGOOD = "adi282123";
var pGOOD = "qaz123qaz123";
var status;
if (login === lGOOD && password === pGOOD) {
greeting = "OK";
} else {
greeting = "ERROR";
}
document.getElementById("demo").innerHTML = greeting;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<p>Zaloguj się</p>
<br id=login><input type="text" name="login"><br>
<br id=haslo><input type="text" name="password">
<button onclick="login()">Zaloguj się !!!</button>
<p id="demo"></p>
<script>
</script>
</body>
</html>
There are two issues in your code:
You have set id to the wrong elements. You have to set id's to input elements.
You have to take the value from the input element
function login() {
var login = document.getElementById("login").value;
var password = document.getElementById("haslo").value;
var lGOOD = "adi282123";
var pGOOD = "qaz123qaz123";
var status;
if (login === lGOOD && password === pGOOD)
{
greeting = "OK";
}
else
{
greeting = "ERROR";
}
document.getElementById("demo").innerHTML = greeting;
}
<p>Zaloguj się</p>
<br><input id="login" type="text" name="login"><br>
<br><input id="haslo" type="text" name="password">
<button onclick="login()">Zaloguj się !!!</button>
<p id="demo"></p>
Related
JS newbie here. I'm making a form with validation that creates a p tag when submitted and validated. I just cant seem to get it to work, because the site reloads when no errors are displayed, instead of creating the paragraph with the inputs. Seems like I've tried every suggested solution there is, but nothing works for me. I hope someone out there might know what the issue is!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Form validation</title>
<link rel="stylesheet" href="stylesheet.css">
<script src="script.js"></script>
</head>
<body>
<form name="contactForm" onsubmit="return validateForm()">
<h2>Application Form</h2>
<div class="row">
<label>Förnamn</label>
<input type="text" name="fname">
<div class="error" id="fnameErr"></div>
</div>
<div class="row">
<label>Efternamn</label>
<input type="text" name="lname">
<div class="error" id="lnameErr"></div>
</div>
<div class="row">
<label>Email Address</label>
<input type="text" name="email">
<div class="error" id="emailErr"></div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
<div class="wrapper">
<div id="list">
</div>
</div>
</body>
</html>
JS:
// Defining a function to display error message
function printError(elemId, hintMsg) {
document.getElementById(elemId).innerHTML = hintMsg;
}
// Defining a function to validate form
function validateForm() {
// Retrieving the values of form elements
var fname = document.contactForm.fname.value;
var lname = document.contactForm.lname.value;
var email = document.contactForm.email.value;
// Defining error variables with a default value
var fnameErr = lnameErr = emailErr = true;
// Validate name
if(fname == "") {
printError("fnameErr", "Please enter your name");
} else {
var regex = /^[a-zA-Z\s]+$/;
if(regex.test(fname) === false) {
printError("fnameErr", "Please enter a valid name");
} else {
printError("fnameErr", "");
fnameErr = false;
}
}
if(lname == "") {
printError("lnameErr", "Please enter your name");
} else {
var regex = /^[a-zA-Z\s]+$/;
if(regex.test(lname) === false) {
printError("lnameErr", "Please enter a valid name");
} else {
printError("lnameErr", "");
lnameErr = false;
}
}
// Validate email address
if(email == "") {
printError("emailErr", "Please enter your email address");
} else {
// Regular expression for basic email validation
var regex = /^\S+#\S+\.\S+$/;
if(regex.test(email) === false) {
printError("emailErr", "Please enter a valid email address");
} else{
printError("emailErr", "");
emailErr = false;
}
}
// Prevent the form from being submitted if there are any errors
if((fnameErr || lnameErr || emailErr) == true) {
return false;
} else {
document.getElementById("add").onclick = function() {
var p = document.createElement("p");
var fname = document.getElementsByName("fname").value;
var lname = document.getElementsByName("lname").value;
var email = document.getElementsByName("email").value;
p.innerHTML = fname + "<br />" + lname + "<br />" + email;
document.getElementById("list").appendChild(p);
};
}
};
You can prevent a erroneous form from submitting with checkValidity() like this...
<button type="submit" formaction="if(this.form.checkValidity()){this.form.submit();} else {alert('Not valid!');}">Submit</button>
Replace my alert() with whatever you had in mind.
I'm pretty new to HTML, and I'm trying to make a simple login system. I'm using Sublime Text 3 and "If" statements in JavaScript don't work. When I type 'if' in script, it goes purple, not JavaScript blue. Am I bad or is Sublime not working at all?
Code:
<html>
<body>
Kullanıcı adı: <input type="text" id="kadi">
<br>
Şifre:<input type="text" id="sifre">
<br>
<button type="button" onclick="fun()">Giriş Yap</button>
<p id="p"></p>
<script type="text/javascript">
function fun(){
var gkadi = document.getElementById().value;
var gsif = document.getElementById().value;
var dkadi = "ali";
var dsif = "aa123"
if(gkadi==dkadi){
if(gsif==dsif){
document.getElementById("p").innerHTML = "Giriş başarılı!";
} else {
document.getElementById("p").innerHTML = "Şifre yanlış";
}
} else {
document.getElementById("p").innerHTML = "Kullanıcı adı yanlış.";
}
}
</script>
</body>
</html>
The syntax coloring can be misleading. It's not your if statement that is having problems. It's that getElementById() expects one argument which should be the id of the element that you are trying to get. With that change, your code works fine.
function fun() {
var gkadi = document.getElementById("kadi").value;
var gsif = document.getElementById("sifre").value;
var dkadi = "ali";
var dsif = "aa123"
if (gkadi == dkadi) {
if (gsif == dsif) {
document.getElementById("p").innerHTML = "Giriş başarılı!";
} else {
document.getElementById("p").innerHTML = "Şifre yanlış";
}
} else {
document.getElementById("p").innerHTML = "Kullanıcı adı yanlış.";
}
}
Kullanıcı adı: <input type="text" id="kadi">
<br> Şifre:
<input type="text" id="sifre">
<br>
<button type="button" onclick="fun()">Giriş Yap</button>
<p id="p"></p>
I am just learning JS and I am trying to navigate to a different page based on the input from the user. /MenuDemo1/src/home.jsp
In the above the two text boxes are coming and after I enter the values and click on the button, I am successful in getting the uid and pwd but on click instead of the url in location.href, it is going to MenuDemo1/src/home.jsp?username=admin&password=admin.
<form name="form1" id="form1" >
First name: <input type="text" name="username"> <br> Last
name: <input type="password" name="password"> <br>
<button id="submit" onclick="validateform()">Submit</button>
</form>
<script>
var linkHome;
function validateform() {
var uid = document.getElementById("form1").elements[0].value;
var pwd = document.getElementById("form1").elements[1].value;
if (uid === "admin" && pwd === "admin") {
document.getElementById("demo1").innerHTML = "Found elements in the form.";
linkHome = "/MenuDemo1/src/adminHome.jsp";
} else {
linkHome = "/MenuDemo1/src/userHome.jsp";
}
location.href = linkHome;
}
</script>
Can someone please point it out what I am missing? TIA.
You have to attach the function to your submit for event :
because onclick will not trigger the reirection :
so first remove the onclick="validateform()"
and then assign the function to the submit event and put return false; to prevent send form to the post url ;
js should look like belllow :
var linkHome;
document.getElementById("form1").onsubmit = function validateform() {
var uid = document.getElementById("form1").elements[0].value;
var pwd = document.getElementById("form1").elements[1].value;
if (uid === "admin" && pwd === "admin") {
document.getElementById("demo1").innerHTML = "Found elements in the form.";
linkHome = "/MenuDemo1/src/adminHome.jsp";
} else {
linkHome = "/MenuDemo1/src/userHome.jsp";
}
location.href = linkHome;
return false;
}
My answer may not be correct, I am 11 and started programming about 9 months ago, so I am a noob. But I believe it is not working because you have no paragraph to where the data can be sent to, so when I ran the program and did this edit it worked.`'
Also i believe there is no page such as "/MenuDemo1/src/adminHome.jsp" to go to
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<form name="form1" id="form1" >
First name: <input type="text" name="username"> <br> Last
name: <input type="password" name="password"> <br>
<button id="submit" onclick="validateform()">Submit</button>
</form>
<p id="demo1"></p>
<script>
var linkHome;
function validateform() {
var uid = document.getElementById("form1").elements[0].value;
var pwd = document.getElementById("form1").elements[1].value;
if (uid === "admin" && pwd === "admin") {
document.getElementById("demo1").innerHTML = "Found elements in the form.";
linkHome = "/MenuDemo1/src/adminHome.jsp";
} else {
linkHome = "/MenuDemo1/src/userHome.jsp";
}
location.href = linkHome;
}
</script>
<link rel="stylesheet" href="style.css">
</head>
<body >
</body>
</html>`
You should try this :-
linkHome = window.location.protocol + "//" + window.location.host + "MenuDemo1/src/adminHome.jsp";
and
linkHome = window.location.protocol + "//" + window.location.host + "MenuDemo1/src/userHome.jsp";
Hope this helps!
I want this to just check if it is correct or not, I am not to smart about HTML so I really would like if someone could explain like im a little kid so I can understand.
Here is the code:
<input type="text" id="user" value="">
<input type="password" id="pass" value="">
<button type="button" id="btn" onclick="func()">Login</button>
<h1 id="txt"></h1>
<script>
var userstate = "false";
var passstate = "false";
function func() {
var utxt = document.getElementById("user").value;
var ptxt = document.getElementById("pass").value;
if (utxt == "david")
userstate = "true";
if (ptxt == "lol123")
passstate = "true";
if (userstate == "true" && passstate == "true")
var txt = "Login succesfully";
else
var txt = "Login not succesfull";
}
</script>
You should put your login message in the div with the id txt using:
document.getElementById('txt').innerHtml = "the text";
<!DOCTYPE html>
<html>
<body>
<input type="text" id="user" value="">
<input type="password" id="pass" value="">
<button type="button" id="btn" onclick="func()">Login</button>
<h1 id="txt"></h1>
<script>
var userstate="false";
var passstate="false";
function func()
{
var utxt = document.getElementById("user").value;
var ptxt = document.getElementById("pass").value;
if (utxt == "david")
userstate = "true";
if (ptxt == "lol123")
passstate = "true";
if (userstate == "true" && passstate == "true")
document.getElementById('txt').innerHTML = "Login succesfully";
else
document.getElementById('txt').innerHTML = "Login not succesfull";
}
</script>
</body>
</html>
Also
Boolean (true | false) do not require quotes:
You can simply use:
userstate = true;
Or
userstate = fale;
and check them as:
if(userstate == false){}
Several issues
remove the quotes from false and true or use a direct assignment and a ternary like I do below
put the initialisation of the states INSIDE the function, otherwise I can change the names after entering ok names.
output the txt variable
NEVER have password testing in client JS - but I guess you are just playing
<input type="text" id="user" value="">
<input type="password" id="pass" value="">
<button type="button" id="btn" onclick="func()">Login</button>
<h1 id="txt"></h1>
<script>
function func() {
var utxt = document.getElementById("user").value;
var ptxt = document.getElementById("pass").value;
var userstate = utxt == "david";
var passstate = ptxt == "lol123";
document.getElementById("txt").innerHTML=(userstate && passstate)?"Login successful": "Login not successful";
}
</script>
Using profiles AGAIN: Do NOT use client based password validations except to keep your kid sister from entering a page.
<input type="text" id="user" value="">
<input type="password" id="pass" value="">
<button type="button" id="btn" onclick="func()">Login</button>
<h1 id="txt"></h1>
<script>
var profiles={ "david":"lol123", "fred":"xdf456"};
function func() {
var utxt = document.getElementById("user").value;
var ptxt = document.getElementById("pass").value;
var success= profiles[utxt] && profiles[utxt]==ptxt; // the name exists and matches the password
document.getElementById("txt").innerHTML=(success)?"Login successful": "Login not successful";
}
</script>
So i want to add to my page a script that would transfer a user after x input to subpage assigned to this input.
Try below code:
<form>
Password: <input type="text" name="password" id='txtPassword'>
<button id='btnSubmit'>Submit</button></form>
<script>
var submit = document.getElementById('btnSubmit')
submit.onclick = function () {
var password = document.getElementById('txtPassword').value;
if (condition1)
{
goes to a subpage1
}
else if (condition2)
{
goes to a subpage1
}
else
{
alert with some message
}
}
</script>
Add a button :
<form>
Password: <input type="text" name="password">
<button onclick="checkPass();">Submit</button>
</form>
Now in JS
<script>
function checkPass(){
var password = document.getElementsByName("password")[0].value;
if ( password != "") //or any condition
{
window.location.href = 'page_1_url' ; //goes to a subpage1
}
else if (condition2) //...
{
window.location.href = 'page_2_url' ; //goes to a subpage1
}
else
{
alert('....') ; //alert with some message
}
}