how to locally store and use html form data - javascript

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.

Related

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>

How to show a success message to redirected page after submitting from another page using jquery in JSP?

I have a reset password form. After submitting it, it redirects to login page. However, it doesn't show any success message upon getting the successful reset password. And, I'm uncertain how can I do this as these are two different jsp files. And even if the login page uses the reset password javascript code, it still can't be able to show the conditional message. I am using java spring boot, jquery and javascript. This is my code:
resetPassword.js
$(".resetPassword").on('submit', function (e) {
e.preventDefault();
var password = $("#pass").val();
var confirmPass = $("#confirmPass").val();
if(password !== confirmPassword){
$(".perror").show();
}
else {
alert("Your password changed successfully");
$(this).unbind('submit').submit();
}
});
resetPassword.jsp
<form:form action="/reset_password" method="POST" class="resetPass" modelAttribute="resetPassword">
<div class="alert alert-danger perror" role="alert" style="display: none">Password not match</div>
<form:input type="hidden" path="token" />
<div class="form-group-row ">
<label htmlFor="passwordReset">Password</label>
<input type="password" id="pass" path="password" placeholder="Password" required/>
</div>
<div class="form-group-row ">
<label htmlFor="confirmPasswordReset">Confirm Password</label>
<input type="password" id="confirmPass" placeholder="Confirm Password" required/>
</div>
<button type="submit" class="btn btn-danger">Submit</button>
</form:form>
Now, this is the login.jsp in where I want the successful message which currently now I've been showing from alert box however that seems not a good design.
login.jsp
<form:form action="/login" method="POST" modelAttribute="user" >
<div class="alert alert-success successfulResetPassword" role="alert" style="display: none>Your password changed successfully. Please login using your email and password</div>
<input type="text" id="email" name="email" placeholder="email" required/>
<input type="password" id="password" name="password" placeholder="pass" required/>
</form:form>
now all I want, is to show the div class=successfulResetPassword after a user reset the password show that the display alter it's value to visible. But I haven't found any good way to this as reset password is using a different js file and from that submit button I'm redirected the whole scenario to login page. Even if the login page can access that js page still it can't have the value of changing display property :
$("#successfulResetPassword").show();. I tried to modify my code like this till now :
resetPassword.js
else {
$("#successfulResetPassword").show(); //it could've shown the msg, but can't because it's in button submit condition after redirected to login page which has no **resetPassword** class
alert("Your password changed successfully");
$(this).unbind('submit').submit();
}
And this is my backend code:
#PostMapping("/reset_password")
public String resetPasswordSubmit(Map<String, Object> model, #ModelAttribute("resetPassword") ResetPasswordDTO resetPassword){
model.put("pageTitle", Constant.PAGE_TITLE);
GenericResponse response = loginService.changePassword(resetPassword);
if(response.getStatusCode() == 200){
return "redirect:/login";
}
model.put("error", "error");
return "resetPassword";
}

HTML form using javascript to validate login credentials?

I have written the below code to make a simple form for validation of form inputs through javascript. Here username and passwords are written in the JS code, but it still shows alert message of the else loop even if giving correct credentials on the form.
Please Help?
var user = document.getElementById('username')
var pass = document.getElementById('password')
function user1() {
if (user == "admin" && pass == "root") {
window.open("javascript_trial.html")
alert('correct username')
} else {
alert('incorrect username or password')
}
}
<form>
<input type="text" name="username" Placeholder="enter username"><br>
<input type="password" name="password" Placeholder="enter password"><br>
<button onclick="user1()">Submit</button>
</form>
There are a few errors here:
You need to get the values of your inputs
You want to get those values when the button is clicked. Your code is grabbing them only when the page loads. Move the variable assignment into your function
You didn't give the elements ID attributes
function user1() {
var user = document.getElementById('username').value
var pass = document.getElementById('password').value
if (user == "admin" && pass == "root") {
window.open("javascript_trial.html")
alert('correct username')
} else {
alert('incorrect username or password')
}
}
<form>
<input type="text" name="username" id="username" Placeholder="enter username"><br>
<input type="password" name="password" id="password" Placeholder="enter password"><br>
<button onclick="user1()">Submit</button>
</form>
Also note that a button's default type is submit which will submit your form and reload the page after the alert is shown when clicked, so you might want to change that to type="button" to prevent that.

Force window relocation through a form - JavaScript

I am building a fake login form which should load locally a different url if the user inserts the correct credentials. This is the html code:
<div class="container">
<h2>Login page - Welcome</h2>
<form id="loginForm" onsubmit="subLogin()">
Username: <input id="userName" type="text" name="userName" required><br/>
Password: <input id="passWord" type="password" name="password" required><br/>
<button type="submit" id="login-button" value="Login">Login</button>
</form>
</div>
And this is the javascript where I try to relocate the user via window.location.href = "/index.html".
function subLogin() {
var userName = document.getElementById('userName').value;
var passWord = document.getElementById('passWord').value;
if (userName !== 'mickeymouse' || passWord !== 'DisneyLand') {
alert('Your username or password is not correct');
} else {
window.location.href = 'http://localhost:8000/index.html';
};
};
If the username or password are wrong, but if they are correct the window.location does not work as espected.
Is there a way to solve this issue with pure javascript, or is it better to use anyway a XMLHttp GET Request via ajax? Thanks in advance for your replies!
I managed to solve the issue. I have simply changed the form to:
<form id="loginForm" action="javascript:subLogin()"></form>
I post the code in case that someone may need it in the future. Thanks anyway for your replies!

Categories