Why doesnt this work? (html/javascript) - javascript

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>

Related

Enable / Disable button depending on two inputs

I have two inputs i want if one of them is equal to the other the button will be enabled else it's disabled.
I managed to do it in Ajax, but i need to do it in Javascript
$(':password').keyup(function() {
if($('#pass').val() == $('#pass1').val() && $('#pass').val()!=='') {
$('#go').removeAttr('disabled');
} else {
$('#go').attr('disabled', true);
}
});
This should work. It's your script "translated" to vanilla JavaScript.
document.querySelector(':password').addEventListener('keypress', function() {
if (document.querySelector('#pass').value == document.querySelector('#pass1').value && document.querySelector('#pass').value !== '') {
document.querySelector('#go').disabled = false;
} else {
document.querySelector('#go').disabled = true;
}
});
I created a JSFiddle for you, implementing that functionality in plain JS: https://jsfiddle.net/3m9g4p0h/4/
JS:
var pw1 = document.getElementById('pw1');
var pw2 = document.getElementById('pw2');
var button = document.getElementById('button');
function compare() {
button.disabled = pw1.value !== pw2.value || pw1 === '';
}
pw1.addEventListener('keyup', compare);
pw2.addEventListener('keyup', compare);
HTML:
<input type="password" id="pw1" />
<input type="password" id="pw2" />
<button id="button" disabled="true">
Click me
</button>
You are looking for form validation functionality.
There are a lot of plugins and libs for this kind of task.
but there is a simple example
function getElements(){
return {
password: document.querySelector('input[name="password"]'),
confirm: document.querySelector('input[name="passwordConfirm"]'),
button: document.querySelector('button'),
}
}
function validate(){
let els = getElements();
els.button.disabled = els.password.value !== els.confirm.value;
}
let elements = getElements();
elements.password.addEventListener('input', validate);
elements.confirm.addEventListener('input', validate);
validate();
<input name="password" type="password" placeholder="password...">
<input name="passwordConfirm" type="password" placeholder="password confirm...">
<button type="submit">submit</button>
and jQuery variant
function validate(event){
let $frm = $(event.target).closest('form');
let pas = $frm.find('input[name="password"]');
let conf = $frm.find('input[name="passwordConfirm"]');
let btn = $frm.find('button');
btn.prop('disabled', pas.val() !== conf.val());
}
let $frm = $('form');
$frm.on('input', validate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form>
<input name="password" type="password" placeholder="password...">
<input name="passwordConfirm" type="password" placeholder="password confirm...">
<button type="submit">submit</button>
</form>

Error when trying to login

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>

How to hash the <input> type password?

I have a JavaScript function that is supposed to create a new login form and then submit the form. But for some reason the function is not submitting anything to the PHP file. Is the function correct or am I doing something wrong here?
Javascript:
function passval() {
var email = document.getElementById("loginEmail").value;
var passv = document.getElementById("loginPass").value;
alert (email + passv);
// Create a new element input, this will be our hashed password field.
var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"../ru/login/ajax/loginchk.php");
var p = document.createElement("input");
var email = document.createElement("input");
alert (p + email)
// Add the new element to our form.
f.appendChild(p);
p.name = "p";
p.type = "text";
p.value = hex_sha512(passv.value);
alert (p.value);
f.appendChild(email);
emai.name = "emailadd";
emai.type = "text";
emai.value = email;
alert (emai.value);
password.value = "";
email = "";
//submit the form.
f.submit();
}
HTML
<form id="login" method="post" action="">
Forgot?
<input type="text" name="loginEmail" id="loginEmail" value="Email" />
<input type="password" name="loginPass" id="loginPass" value="pass" />
<input type="submit" id="submit" name="submit" value="Login" onclick="passval()" />
</form>

Password Validation javascript

I am trying to create a very very basic profile page using Name, Email, Username, and Password. I have to have a password validation code/button.
The home page will be very similar to a common profile page. The user must be able to input the following:
Name field
Email field
User ID field
Password field 3
Validation Password field
The following buttons are required:
Password validation button
Create Profile button
I can put it all together, but the problem I am having is that the javascript console is telling me that there are some errors in the code...
function validate(){
var pass1 = document.getElementById('password');
var pass2 = document.getElementById('Password2');
if (pass1 == pass2)
{
alert("Passwords Match")
}
else
{
alert("Passwords Do Not Match")
}
}
<head>
<script type="text/javascript" src="Profile Page.js"></script>
</head>
<body>
Enter First and Last Name
<input type="text" id="name">
<br>Enter Your Email Address
<input type="text" id="email">
<br>Please Enter a Username
<input type="text" id="username">
<br>Please Enter a Password
<input type="password" id="password">
<br>Enter Your Password Again
<input type="Password" id="password2">
<br>
<button type="button" id="validate" onClick="validate()">Validate Password</button>
<button type="button" id="create" onClick="submit()">Create Profile</button>
</body>
Ok, so I figured out where my errors were, now the alert that I set up for the passwords not matching is coming up, even when the passwords are the same thing. Any suggestions?
Please try it like this:
function validateForm(){
var pass1 = document.getElementsByName("password")[0].value;
var pass2 = document.getElementsByName("password2")[0].value;
if (pass1 === pass2) {
alert("Passwords Match");
} else {
alert("Passwords Do Not Match");
}
}
Enter First and Last Name
<input type = "text" id = "name" /><br/>
Enter Your Email Address
<input type = "text" id = "email" /><br/>
Please Enter a Username
<input type = "text" id = "username" /><br/>
Please Enter a Password
<input type = "password" name = "password" /><br/>
Enter Your Password Again
<input type = "Password" name= "password2" /><br/>
<button type = "button" id = "validate" onclick = "validateForm();">Validate Password</button>
<button type = "button" id = "create" onclick = "submit()">Create Profile</button>
Below is the generic function to validate password by comparing with repeat password, Contains lowercase, Contains uppercase, Contains digit
function validatePassword(password, repeatPassword){
var MinLength = 6;
var MaxLength = 15;
var meetsLengthRequirements:boolean = password.length >= MinLength && repeatPassword.length <= MaxLength;
var hasUpperCasevarter:boolean = false;
var hasLowerCasevarter:boolean = false;
var hasDecimalDigit:boolean = false;
if (meetsLengthRequirements)
{
for (var i = 0, len = password.length; i < len; i++) {
var char = password.charAt(i);
if (!isNaN( +char * 1)){
hasDecimalDigit = true;
}
else{
if (char == char.toUpperCase()) {
hasUpperCasevarter = true;
}
if (char == char.toLowerCase()){
hasLowerCasevarter = true;
}
}
}
}
var isValid = meetsLengthRequirements
&& hasUpperCasevarter
&& hasLowerCasevarter
&& hasDecimalDigit;
return isValid;
}

how tho set value to “text” using Element.PropertyName IE browser?

Here is my code:
<input type="text" id="fname">
<input type="button" onclick = "b();" value="change" />
<script>
function b(){
var fanme = document.getElementById('fname');
if(fname.value){
fname.value="";
}else{
fname.value="ffff";
}
</script>
I tried this, but the fname's value sometimes changed when I click the button twice. What's the matter?
On other browsers is OK
Try this : instead of Elements use Element and also close function with }.
function b(){
var fanme = document.getElementById('fname');
if(fname.value){
fname.value="";
}else{
fname.value="ffff";
}
}
Try this,
<input type="text" id="fname">
<input type="button" onclick = "b();" value="change" />
<script>
function b(){
var fanme = document.getElementById('fname').value;
if(fname == "" || fname == null || fname == "null"){
fanme = "Set the value as you want";
}else{
//proceed
}
</script>

Categories