We Keep Coding

how to locally store and use html form data

I have made a basic html webpage having a login screen with username and password and after validating the form it will redirect to another page.
Now I want to save the data in localstorage and show the login details within the webpages as the user to see his information.
Help me to achieve the functionality by modifying my code below:
index.html -
<form class="form">
<label>Username</label>
<div>
<input type="text" id="username" placeholder="Enter Username" autocomplete="off">
</div>
<label>Password</label>
<div>
<input type="password" id="password" placeholder="Enter Password">
</div>
Forgot Password?
<input type="submit" value="Login">
</form>
script.js -
window.addEventListener("DOMContentLoaded", () => {
document.querySelector(".form").addEventListener("submit", function(e) {
const username = this.username.value;
const password = this.password.value;
if(username.length > 4 && password.length > 4){
this.action = "landing.html";
} else {
e.preventDefault();
alert("Invalid credentials");
}
})
})
So I want to store the username and password in the localstorage and display the information in the landing page after validating the form data on login page.
Guide me how I can achieve the functionality I want to implement.

How to navigate to another page using a button inside a form?

I'm designing a login form where the username and password get validated. If the user inputs are correct then I need to navigate to a different page else display an error message. The problem I'm facing is that I'm unable to navigate to another page after validation. The only way I can switch to another page is by entering the html file's name directly in the form action attribute. Here is my code:
<form id="form" action="submit.php" target="_blank" method="post" >
<div class="container">
<label for="uname"><b>Username</b></label>
<input id="usrname" type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input id="passwrd" type="password" placeholder="Enter Password" name="psw"
required>
<button type="submit" onClick="validateForm()">Login</button>
</div>
</form>
<script>
function validateForm() {
var un = document.querySelector('#usrname').value;
var pw = document.querySelector('#passwrd').value;
var username = "admin";
var password = "pass";
if ((un == username) && (pw == password)) {
alert('You are successfully logged in');
location.replace("https://google.com")
}
else {
alert("Login was unsuccessful, please check your username and password");
return false;
}
}
</script>

Try this:
In the if statement, replace this:
location.replace("https://google.com")
And try using this:
window.location.href= "https://google.com"

How do you make a login page screen with HTML which only has one correct username and one password?

I know that you use php to make logins with usernames and passwords but I'm still learning HTML, is there a way to make a form with one correct username and one correct password which are hardcoded using HTML or JS?
So for example if the user enters username abcd and password pass12345, then it goes to the next screen, otherwise it says "Sorry, password is incorrect."
This is just for learning purposes, I know it's not secure at all and shouldn't be used for actual websites. Just learning. Thanks :)
The login page right now...
<form action="loggedin.html">
<label for="username">Username</label>
<input
type="text"
placeholder="Enter Username"
name="username"
required
/>
<label for="password">Password</label>
<input
type="password"
placeholder="Enter Password"
name="password"
required
/>
<button type="submit">Submit</button>
</form>

DON'T EVER USE IN PRODUCTION - LEARNING PURPOSES ONLY
As this is for learning purposes only and you understand it's not secure, I have gone ahead and written a small snippet that will check against a hard coded username and password. If entered username or password do not match it will alert the user.
I have added comments through out the code to explain what I did and what's going on.
See below
<!--
Added onsubmit attribute to form so that it will trigger the JS function (authenticate).
if the function returns false it will prevent the form from submitting
-->
<form action="loggedin.html" onsubmit="return authenticate()">
<label for="username">Username</label>
<!-- added IDs to the inputs -->
<input
id="username"
type="text"
placeholder="Enter Username"
name="username"
required
/>
<label for="password">Password</label>
<input
id="password"
type="password"
placeholder="Enter Password"
name="password"
required
/>
<button type="submit">Submit</button>
</form>
<script>
//Following function gets values of the username and password fields and checks to see if they match a hard coded username and password
function authenticate(){
var authorised;
//get input values
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
//check to see if the password and username match
if(username == "abcd" && password == "pass12345"){
authorised = true;
}else{ // username or password do not match
authorised = false;
//alert user
alert("Sorry, password is incorrect.");
}
//return result
return authorised;
}
</script>

Trying to submit html form data via xmlhttprequest

I am trying to put together a simple login prompt for a bit of in house testing and I have found myself stuck. I have the login prompt made via HTML and am trying to send it off via xmlhttprequest. Here is my JS code:
var xhr = new XMLHttpRequest();
function loginResults() {
var loginUser = document.getElementById("username").value;
var loginPass = document.getElementById("password").value;
//console.log(loginUser + loginPass);
xhr.open("post", "https://test.com/api/login/");
var loginData = "username=" + loginUser + "&password=" + loginPass
xhr.send(loginData);
//console.log(loginData);
xhr.addEventListener("readystatechange", processRequest, false);
}
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
}
}
The issue is that the xhr.send completely fails using this method. However if I replace the variables sent with the plain text then everything works fine. Like this:
var loginData = "username=" + "test#test.com" + "&password=" + "test1234"
What is the difference between pulling the info via the form data and having the login hard coded like that? The request payload is exactly the same in both instances.
EDIT
Here is the gist of my HTML form:
<form name="isLogin" id="isLogin" onSubmit="loginResults()" method="post">
<div class="container">
<label for="username"><b>Email</b></label>
<input type="text" id="username" placeholder="Enter Email" name="username" required>
<label for="password"><b>Password</b></label>
<input type="password" id="password" placeholder="Enter Password" name="password" required>
<button id="submitLogin" type="submit">Login</button>

The reason the request gets cancelled is you aren't intercepting the standard form submission. When you click the Login button, Chrome fires off the AJAX request, then also submits the form. Since this leads to a page load, Chrome cancels the AJAX request.
What you need to do is prevent the default event handling. A clean way to do this is to add the submission handling in your script:
document.getElementById("isLogin").onsubmit = function(e) {
e.preventDefault();
// AJAX here
console.log("form submission intercepted");
};
<form name="isLogin" id="isLogin" method="post">
<div class="container">
<label for="username"><b>Email</b></label>
<input type="text" id="username" value="test#test.com" name="username" required>
<label for="password"><b>Password</b></label>
<input type="password" id="password" value="test1234" name="password" required>
<button id="submitLogin" type="submit">Login</button>
</div>
</form>

You need to escape values before concatenating them to the URL querystring:
var loginUser = encodeURIComponent(document.getElementById("username").value);
var loginPass = encodeURIComponent(document.getElementById("password").value);
Secondly, i wouldn't recommend passing password directly through querystring.
The secure way to pass it is preferably salted-and-hashed.

Login page that uses .htaccess

I've been trying to make a login page with HTML and JS which uses my .htaccess files to access a website instead of having that ugly pop up window with the user:pass.
I've got this code so far, which doesn't work. When I put in the username and pass, all it does is redirect to the page and opens its .htaccess
<form name="login-form" class="login-form">
<input type="hidden" name="server" value="mywebsite.com/private">
<div class="header">
<h1>Develop Page</h1>
<span>Login to access!</span>
</div>
<div class="content">
<input name="username" type="text" class="input username" placeholder="Username" />
<div class="user-icon"></div>
<input name="password" type="password" class="input password" placeholder="Password" />
<div class="pass-icon"></div>
</div>
<div class="footer">
<input type="button" class="button" onClick="Login(this.form)">Login</a>
</div>
</form>
And the JS:
<script>
function Login(form) {
var username = form.username.value;
var password = form.password.value;
var server = form.server.value;
if (username && password && server) {
var htsite = "http://" + username + ":" + password + "#" + server;
window.location = htsite;
}
else {
alert("Please enter your username and password.");
}
}
</script>
Am I doing something wrong? Is there a better way to do this?
Any help would be much appreciated :)

The "http://" + username + ":" + password + "#" + server format does not work on IE since IE9 I believe, supposedly for security reasons. I don't think there is a way to accomplish this well, short of changing how the server does authentication (e.g. custom user/session management/redirects/etc.). There are many user/session management libraries out there that might help you.