Develop Reference

function not pulling input data from local host

I am creating a simple login an sign up form that is used to create a user and store it in the local host. I have got the sign up form working as it should, but when I try and pull the information from the localhost, it just refreshes the page. Im just wondering how I can get the function to work correctly.
Here is my JS:
const signup = (e) => {
let user = {
firstName: document.getElementById("firstName").value,
lastname: document.getElementById("lastName").value,
email: document.getElementById("email").value,
username: document.getElementById("username").value,
password: document.getElementById("password").value,
confirm_password: document.getElementById("confirm_password").value,
};
localStorage.setItem("user", JSON.stringify(user));
console.log(localStorage.getItem("user"));
e.preventDefault();
alert("Signup Successful")
};
function login() {
var stored_username = localStorage.getItem('username');
var stored_password = localStorage.getItem('password');
var username1 = document.getElementById('username1');
var password2 = document.getElementById('password2');
if(username1.value == stored_username && password2.value == stored_password) {
alert('Login Successful.');
}else {
alert('Username or password is incorrect.');
}
}
document.getElementById("login-btn").addEventListener(type = click, login())
And here is my HTML:
<div class="bodyBx">
<section>
<div class="container">
<div class="user signinBx">
<div class="imgBx"><img src="https://images.unsplash.com/photo-1551034549-befb91b260e0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" style="width: 400px;" alt="" /></div>
<div class="formBx">
<form>
<h2>Sign In</h2>
<input type="text" id="username2" placeholder="Username" />
<input type="password" id="password2" placeholder="Password" />
<button id = "login-btn" type="submit" onclick="login();">Submit</button>
<p class="signup">
Need an account ?
Sign Up.
</p>
</form>
</div>
</div>
</div>
</section>
<!-- ================= Sign Up Form Start ================= -->
<section>
<div class="container">
<div class="user signupBx" id="section2">
<div class="imgBx"><img src="https://images.unsplash.com/photo-1555680206-9bc5064689db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" style="width: 400px;" alt="" /></div>
<div class="formBx">
<form role="form" onsubmit="signup(event)">
<h2>Sign Up</h2>
<input type="text" id="firstName" placeholder="First Name" />
<input type="text" id="lastName" placeholder="Last Name" />
<input type="email" id="email" placeholder="example#email.com..." />
<input type="text" id="username" placeholder="Username" />
<input type="password" id="password" placeholder="Password" />
<input type="password" id="confirm_password" placeholder="Confirm Password" />
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
</section>
</div>

Change the type of login button to button from submit, like below
<button id = "login-btn" type="button" onclick="login();">Submit</button>
If type=submit the form is posted to the url specified in the action attribute of the form, else to the same page if action is missing and you will see a page refresh.
Alternate method - You can also try return false; in your login()
Also your addEventListener should be like below, you don't have to provide type = click, the first param is of type string and second param is of type function. Check docs
document.getElementById("login-btn").addEventListener("click", login)

Localstorage can only store text. So you store a stringified object, which is fine, but you're trying to retrieve properties from it which don't exist.
Instead of:
var itm={someField:1};
localStorage.setItem("itm",JSON.stringify(itm));
//then later
localStorage.getItem("someField");
//localstorage doesnt know what someField is
You want:
var itm={someField:1};
localStorage.setItem("itm",JSON.stringify(itm));
//then later
itm = JSON.parse(localStorage.getItem("itm"));
someField = itm.someField
As for the refresh, check this out:
Stop form refreshing page on submit
TL;DR: Add e.preventDefault() in function login() (you'll have to change it to function login(e).

Pop-up messages during registration

recently started to deal with javascript, now I'm doing a registration page. And at the moment the notification about the incorrect filling of the form is displayed via alert (). How can this be improved so that if you enter incorrectly, you immediately see a hint ?
function valid(form){
var checker = false;
var namePattern = new RegExp("^([A-z]{4,20})$");
var passwordPattern = new RegExp("^[A-z0-9]{4,20}$");
var emailPattern = new RegExp("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*#[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,5})$");
var fName = form.fName.value;
var lName = form.lName.value;
var password = form.password.value;
var confirmPassword = form.confirmPassword.value;
var email = form.eMail.value;
if(!namePattern.test(fName)){
checker = "Wrong first name";
}else if(!namePattern.test(lName)){
checker = "Wrong last name"
}else if(!passwordPattern.test(password)){
checker = "Wrong password"
}else if(confirmPassword != password){
checker = "Your passwords do not match"
}else if(!emailPattern.test(email)){
checker = "Wrong email"
}
if(checker){
alert(checker);
}
}
<form action="" method="post" name="submit" onsubmit="valid(this)">
<div class="register-top-grid">
<h3>PERSONAL INFORMATION</h3>
<div>
<span>First Name<label>*</label></span>
<input type="text" name="fName" id="fName" placeholder="Your first name">
</div>
<div>
<span>Last Name<label>*</label></span>
<input type="text" name="lName" placeholder="Your last name">
</div>
<div>
<span>Email Address<label>*</label></span>
<input type="text" name="eMail" placeholder="You email">
</div>
<div class="clear"></div>
<a class="news-letter" href="#">
<label class="checkbox"><input type="checkbox" name="checkbox" checked=" "><i> </i>Sign
Up for Newsletter</label>
</a>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="register-bottom-grid">
<h3>LOGIN INFORMATION</h3>
<div>
<span>Password<label>*</label></span>
<input type="password" name="password" placeholder="Your password">
</div>
<div>
<span>Confirm Password<label>*</label></span>
<input type="password" name="confirmPassword" placeholder="Confirm your password">
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<input type="submit" name="submit" value="submit"/>
</form>
I will be grateful for help)

I suggest you put on input elements onchange function, for example:
<input type="text" name="fName" id="fName" placeholder="Your first name" onchange='validateInput(e)'>
And then you check in function:
function validateInput(e){
var namePattern = new RegExp("^([A-z]{4,20})$");
const value = e.target.value;
if(!namePattern.test(value)){
alert("Wrong first name");
// But instead of alert I would suggest you change the color of the input element in order for the user to see real time that he is entering wrong thing.
//When he enters correct data, input border should be green. This is much more user friendly
}
}

You can every validation check separately like this...
function firstname(value){
var checker = false;
var namePattern = new RegExp("^([A-z]{4,20})$");
if(!namePattern.test(value)){
checker = "Wrong first name";
}
if(checker){
alert(checker);
}
}
<input type="text" name="fName" id="fName" placeholder="Your first name" onblur="firstname(this.value)">
I suggest you can use jquery validation.

The thing is, you are checking your form on your submit event (which is obviously the event that is trigger when the form is submitted).
You need to add input validation on each of your input fields via certain event listeners.
If you add onchange event listener, your callback validation will fire each time you move your focus to another element (aka blur event).
If you add oninput event listener, your callback validation will fire each time you type something new.
I would recommend taking a look at the answers of this question.

var checker;
function valid(form){
checker = '';
var namePattern = new RegExp("^([A-z]{4,20})$");
var passwordPattern = new RegExp("^[A-z0-9]{4,20}$");
var emailPattern = new RegExp("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*#[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,5})$");
var fName = form.fName.value;
var lName = form.lName.value;
var password = form.password.value;
var confirmPassword = form.confirmPassword.value;
var email = form.eMail.value;
if(!namePattern.test(fName)){
checker += "No first name<br/>";
}
if(!namePattern.test(lName)){
checker += "No last name<br/>"
}
if(!passwordPattern.test(password)){
checker += "No password<br/>"
}
if(confirmPassword != password){
checker += "Your passwords do not match<br/>"
}
if(!emailPattern.test(email)){
checker += "No email<br/>"
}
if(checker){
document.getElementById("hint").innerHTML = checker;
}
}
valid(document.getElementById("form"));
<form id='form' action="return false;" method="post" name="submit" oninput="valid(this)" onsubmit=' return false;'>
<div class="register-top-grid">
<h3>PERSONAL INFORMATION</h3>
<div>
<span>First Name<label>*</label></span>
<input type="text" name="fName" id="fName" placeholder="Your first name">
</div>
<div>
<span>Last Name<label>*</label></span>
<input type="text" name="lName" placeholder="Your last name">
</div>
<div>
<span>Email Address<label>*</label></span>
<input type="text" name="eMail" placeholder="You email">
</div>
<div class="clear"></div>
<a class="news-letter" href="#">
<label class="checkbox"><input type="checkbox" name="checkbox" checked=" "><i> </i>Sign
Up for Newsletter</label>
</a>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="register-bottom-grid">
<h3>LOGIN INFORMATION</h3>
<div>
<span>Password<label>*</label></span>
<input type="password" name="password" placeholder="Your password">
</div>
<div>
<span>Confirm Password<label>*</label></span>
<input type="password" name="confirmPassword" placeholder="Confirm your password">
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div style='color:red' id='hint'></div>
<input type='submit'/>
</form>
Using the oninput event to run every single time a input is changed. More user friendly by displaying a text tip instead of popups, and shows all errors, not just the first one in the if/elseif loop.
P.S: You seem to have forgotten to add the submit button in your code.
EDIT: Also made it check validation as soon as the page loaded up too.

My Javascript if statement returns true even though it is false

I have a button and a form on my page. When the button is clicked it should display the form, and when click again it should hide the form.
For some reason, whenever the button is clicked it executes the first if statement regardless of whether it is true or not. How can I fix this?
Here is my HTML code
<div class="return-user-signin">
<h2 class="checkout-return-cust">Returning customer?</h2>
<button class="checkout-login-button"><i class="fas fa-user"></i> log in</button>
<form class="woocomerce-form woocommerce-form-login login check-login pop-login-form" method="post" style="display: none;">
<p class="form-row form-row-first">
<input placeholder="Username or email" class="input-text placeholder" name="username" id="username" type="text">
</p>
<p class="form-row form-row-last">
<input class="input-text placeholder" placeholder="Password" name="password" id="password" type="password">
</p>
<div class="clear"></div>
<p class="form-row">
</p>
<div class="clear"></div>
</form>
Here is my JavaScript
var login_button = $(".checkout-login-button");
var login_form = $(".pop-login-form");
if (login_form.css('display') == "none") {
$(document).on('click', '.checkout-login-button', function () {
login_form.show();
login_form.off('click');
login_form.css('display', 'block');
return;
});
} else {
$(document).on('click', '.checkout-login-button', function () {
login_form.hide();
login_form.off('click');
login_form.css('display', 'none');
return;
});
}

You have first to create the event, then inside it you do your conditional statements.
var login_button = $(".checkout-login-button");
var login_form = $(".pop-login-form");
$(document).on('click', '.checkout-login-button', function(){
if( login_form.css('display') == "none" ) {
login_form.show();
login_form.off('click');
login_form.css('display', 'block');
return;
} else {
login_form.hide();
login_form.off('click');
login_form.css('display', 'none');
return;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="return-user-signin">
<h2 class="checkout-return-cust">Returning customer?</h2>
<button class="checkout-login-button"><i class="fas fa-user"></i> log in</button>
<form class="woocomerce-form woocommerce-form-login login check-login pop-login-form" method="post" style="display: none;">
<p class="form-row form-row-first">
<input placeholder="Username or email" class="input-text placeholder" name="username" id="username" type="text">
</p>
<p class="form-row form-row-last">
<input class="input-text placeholder" placeholder="Password" name="password" id="password" type="password">
</p>
<div class="clear"></div>
<p class="form-row">
</p>
<div class="clear"></div>

You can have only one click handler and check the CSS state inside it. Besides, css is taking care of the visibility using display:block/none, so in my opinion the show()/hide() methods are redundant.
var login_button = $(".checkout-login-button");
var login_form = $(".pop-login-form");
$(document).on('click', '.checkout-login-button', function() {
if (login_form.css('display') === "none") {
login_form.css('display', 'block');
} else {
login_form.css('display', 'none');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="return-user-signin">
<h2 class="checkout-return-cust">Returning customer?</h2>
<button class="checkout-login-button"><i class="fas fa-user"></i> log in</button>
<form class="woocomerce-form woocommerce-form-login login check-login pop-login-form" method="post" style="display: none;">
<p class="form-row form-row-first">
<input placeholder="Username or email" class="input-text placeholder" name="username" id="username" type="text">
</p>
<p class="form-row form-row-last">
<input class="input-text placeholder" placeholder="Password" name="password" id="password" type="password">
</p>
<div class="clear"></div>
<p class="form-row">
</p>
<div class="clear"></div>
</form>

Change your JavaScript as below:
var login_button = $(".checkout-login-button");
var login_form = $(".pop-login-form");
var show_form = false; // add this line
$(document).on('click', '.checkout-login-button', function () {
if(!show_form){
//SHOW FORM
show_form = true;
}else{
//HIDE FORM
show_form = false;
}
});

You seem to be trying to change the function handling the click, which would be accomplished by removing the existing one and adding another. You’re trying to remove it here:
login_form.off('click');
but that doesn’t work when you actually added the listener to document to make use of event delegation, and no listener is being added again after this.
It’s simpler to just have one listener, and to attach it directly to the element if it exists at the time:
var login_form = $(".pop-login-form");
$(".checkout-login-button").click(function () {
login_form.toggle();
});
which your login_button initialization suggests is the case. If not, continue with event delegation by all means:
var login_form = $(".pop-login-form");
$(document).on("click", ".checkout-login-button", function () {
login_form.toggle();
});

It's the other way around, you define the .click() event once and inside it you define the logic for the if-else structure.
The way you have it now, it is only showing the form (never hiding it) because the only part of the code being run is the one inside login_form.css('display') == "none" which is true when the page loads
HIH
var login_button = $(".checkout-login-button"); var login_form = $(".pop-login-form");
$(document).on('click', '.checkout-login-button', function(){
if( login_form.css('display') == "none" ) {
login_form.show();
login_form.off('click');
login_form.css('display', 'block');
}
else {
login_form.hide();
login_form.off('click');
login_form.css('display', 'none');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="return-user-signin">
<h2 class="checkout-return-cust">Returning customer?</h2>
<button class="checkout-login-button"><i class="fas fa-user"></i> log in</button>
<form class="woocomerce-form woocommerce-form-login login check-login pop-login-form" method="post" style="display: none;">
<p class="form-row form-row-first">
<input placeholder="Username or email" class="input-text placeholder" name="username" id="username" type="text">
</p>
<p class="form-row form-row-last">
<input class="input-text placeholder" placeholder="Password" name="password" id="password" type="password">
</p>
<div class="clear"></div>
<p class="form-row">
</p>
<div class="clear"></div>

Onsubmit in form does not called

I have next form:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function submit(form) {
var first_pass = form.find('.first_try');
var second_pass = form.find('.second_try');
if (first_pass.value == second_pass.value) {
return true
}
first_pass.value = '';
second_pass.value = '';
first_pass.attr('placeholder', 'Пароли не совпадают');
first_pass.css('border-color', 'red');
second_pass.css('border-color', 'red');
return false
}
</script>
<form role="form" method="post" onsubmit="return submit($('#PasswordChange form'))">
<h3>Редактирование пользователя</h3>
<div class="form-group">
<input type="password" class="form-control first_try" name="password"
placeholder="Новый пароль"
required>
</div>
<div class="form-group">
<input type="password" class="form-control second_try" name="password"
placeholder="Повтор пароля"
required>
</div>
<input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить"></input>
</form>
This script checks whether passwords are the same.
But using firefox debugger i can't find that it goes into this method.
Is this problem with script? Or Is ths problem about declaring onsubmit handler?

There was many problems:
change value to val
use another name for submit function, it's kinda reserved
use this instead of $('#PasswordChange form')
use var first_pass = $('.first_try'); instead of find
you forgot to write else
and you need use event.preventDefault(); to stop refreshing page or submiting page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function save(form) {
var first_pass = form.querySelector('.first_try');
var second_pass = form.querySelector('.second_try');
if (first_pass.value == second_pass.value) {
alert('its ok');
return true;
} else {
first_pass.value = '';
second_pass.value = '';
first_pass.placeholder = 'Пароли не совпадают';
first_pass.style.borderColor='red';
second_pass.style.borderColor='red';
return false
}
}
</script>
<form role="form" method="post" onsubmit="event.preventDefault(); return save(this)">
<h3>Редактирование пользователя</h3>
<div class="form-group">
<input type="password" class="form-control first_try" name="password"
placeholder="Новый пароль"
required>
</div>
<div class="form-group">
<input type="password" class="form-control second_try" name="password"
placeholder="Повтор пароля"
required>
</div>
<input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить"/>
</form>

Use this code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function submitData(form) {
var first_pass = form.find('.first_try');
var second_pass = form.find('.second_try');
if (first_pass.value == second_pass.value) {
return true
}
first_pass.value = '';
second_pass.value = '';
first_pass.attr('placeholder', 'Пароли не совпадают');
first_pass.css('border-color', 'red');
second_pass.css('border-color', 'red');
return false
}
</script>
</head>
<body>
<form role="form" method="post" onsubmit="return submitData($('#PasswordChange form'))">
<h3>Редактирование пользователя</h3>
<div class="form-group"> <input type="password" class="form-control first_try" name="password" placeholder="Новый пароль" required></div>
<div class="form-group"> <input type="password" class="form-control second_try" name="password" placeholder="Повтор пароля" required></div><input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить"></form>
</body>
</html>

Please change submit function name because it is keyword so it is not use it. Also remove </input> next to submit button

Use this :
onsubmit="return submit(this)"

You should not return anything if you don't need to cancel the submit action. Also you could use submit form event handler with jQuery .submit() method instead of hanler definition in onsubmit attribute.
$("form").submit(function(e) {
var passwords = $('[name=password]');
if (passwords.eq(0).val() !== passwords.eq(1).val()) {
alert("Пароли не совпадают!");
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" method="post" action="/">
<h3>Редактирование пользователя</h3>
<div class="form-group">
<input type="password" class="form-control first_try" name="password" placeholder="Новый пароль" required >
</div>
<div class="form-group">
<input type="password" class="form-control second_try" name="password" placeholder="Повтор пароля" required />
</div>
<input type="submit" name="submit" class="btn btn-primary pull-right" value="Отправить" />
</form>
Also I recommend you to use Bootstrap validation states instead of input's border style setting.

Press Enter and the button function to be called

I have a page login, with label of user and pass. I want to know, how I do to when I press Enter in textbox to the button function to be called.
Login.js
$(document).ready(function () {
$("#btnOK").on("click", function () {
var UserName = $("#txt_user").val();
var Password = $("#txt_pass").val();
.
.
.
});
Login.cshtml
form action="#Url.Action("Default")" method="post">
<div id="boxLogin">
<br />
<label id="lbl_login">Login</label>
<div id="log">
<img src="../../img/images.jpg" alt=""/>
</div>
<div class="boxUser">
<label id="lbl_user">User: </label>
<input id="txt_user" type="text" value="" name="UserName">
</div>
<div class="boxPass">
<label id="lbl_pass">Pass: </label>
<input id="txt_pass" type="password" name="Password">
</div>
<div id="btns">
<input type="button" ID="btnOK" class="btn" value="Confirm" />
<input type="button" ID="btnCancel" class="btn" value="Cancel" />
</div>
</div>
</form>

You can submit it using below code:
$('#txt_usuario').on('keyup', function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
$( "#form" ).submit();
}
});
where form - is your form id.

$("#txt_senha").keyup(function(event){
if(event.keyCode == 13){
$("#btnOK").click();
}
});

Simple method is to change the btnOK element to a submit button (type="submit"), and change the javascript to run on the onsubmit event of the form.