Question 135357 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – JavaScript Login Form Problem Related to Remember me Button

I have made this login form from my basic HTML CSS and JavaScript knowledge. There is a Remember me button in this login form I have created and now I have to give it a functionality.
I want to click OK button and then it should:
Create a cookie if Remember Me is set and save Student Id and Name.
I am using Visual Studio Code.
Here is my HTML + JavaScript Code:

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Login Form</title>
    <link rel="stylesheet" href="style1.css">
</head>
<body>
    <div class  = "f1">
        <label for = "uname">
            <b>Username</b>
        </label>
        <input type = "text"
        placeholder = "Enter Username"
        id = "user"
        name = "uname" requitred>
        <span id = "username" class = "text-danger font-weight-bold"></span>
        <label for = "psw">
            <b>Password</b>
        </label>
        <input type = "text"
        placeholder = "Enter Password"
        id = "pass"
        name = "psw" requitred>
        <button type="button" onclick="alert('Login is clicked')">OK</button>
        <button type="button" onclick="alert('Cancel is clicked')">Cancel</button>
        <input type="checkbox" value="lsRememberMe" id="rememberMe"> 
        <label for="rememberMe">Remember me</label>
        <input type="submit" value="Login" onclick="lsRememberMe()">
        <script>
            if (onclick == "alert('Login is clicked')"){
                window.location.assign("Home.html");
            }
            
        </script>
</form>
</body>
</html>

CSS Code:-

form{
    border: 3px solid black;
}
input[type=text],
input[type=password]{
    width:27%;
    padding:12px 20px;
    margin:8px 0;
    display: inline-block;
    border: 1px solid black;
    box-sizing: border-box;
}
button{
    background-color: #04aa6d;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 27%;
}
input[type="checkbox"] {
    -webkit-appearance: checkbox;
       -moz-appearance: checkbox;
            appearance: checkbox;
    display: inline-block;
    width: auto;
}
body {
    background-image: url('cool.jpg');
    color: #FFFFFF;
}
input[type = Clear]{
    font-size : 18px;
    padding : 5px;
    width : 20%;
    border-radius: 0 10px;
    border : none;
}

I have tried a lot of different techniques but it not work for me. (Code must be in JavaScript and HTML).
Thanks.

Tags:

2

Answers


  1. 0

    It would be better to save under the localStorage instead of a cookie because cookie is being sent to server every request. But both are ok if you are just saving the name (although that’s something most browsers do anyway).

    So basically you want to setItem when remeberMe is checked. you want to removeItem otherwise. When onload, restore the value using getItem

    var user = document.getElementById("user");
var pass = document.getElementById("pass");
var rememberMe = document.getElementById("rememberMe");

window.addEventListener("load", function() {
  console.log('run this: user.value = localStorage.removeItem("login-user-name") || "";');
})

function do_submit() {

  if (rememberMe.checked) {
    console.log('run this: localStorage.setItem("login-user-name", user.value);');
  } else {
    console.log('run this: localStorage.removeItem("login-user-name");');
  }

  alert("will cancel because return false explicitly")
  return false;
}
    form {
  border: 3px solid black;
}

input[type=text],
input[type=password] {
  width: 27%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid black;
  box-sizing: border-box;
}

button {
  background-color: #04aa6d;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 27%;
}

input[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
  display: inline-block;
  width: auto;
}

body {
  background-image: url('cool.jpg');
  color: #FFFFFF;
}

input[type=Clear] {
  font-size: 18px;
  padding: 5px;
  width: 20%;
  border-radius: 0 10px;
  border: none;
}
    <form class="f1" action="home.html" onsubmit="return do_submit()">
  <label for="user">
        <b>Username</b>
    </label>
  <input type="text" placeholder="Enter Username" id="user" name="uname" required>
  <span id="username" class="text-danger font-weight-bold"></span>
  <label for="pass">
        <b>Password</b>
    </label>
  <input type="text" placeholder="Enter Password" id="pass" name="psw" required>
  <!-- 
  <button type="button" onclick="alert('Login is clicked')">OK</button>
  <button type="button" onclick="alert('Cancel is clicked')">Cancel</button>
  -->
  <input type="checkbox" value="lsRememberMe" id="rememberMe">

  <label for="rememberMe">Remember me</label>
  <input type="submit" value="Login">

</form>
    Login or Signup to reply.
  2. 0

    Is student ID a part of the response that you get from the server?

    To create cookies, save the student name value in a variable:

    const username = document.getElementById("user").value;

    and save it as cookie if the Remember me checkbox is checked:

    const rememberMe = document.querySelector("rememberMe");
if (rememberMe.checked) {
  document.cookie = "username=" + username;
}

    Next time on page loads, app reads the cookie value from browser and you can show previous username.

    You may use js-cookie for easier cookie manipulation.
    More info about JavaScript cookie.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search