CODEWITHSUNDEEP
javascripthtmlformspasswords
BlackCat
BlackCat

Reputation: 2044

Why the html password field getting empty

I am creating a password field where user can either hide/show the password he is entering. Below are the html and javascript code. The issue is when I am testing the code in browser:- I enter the password and click on 'show/hide' button and the password is visible and the page get refreshed then the password is gone. How should I solve this?

html: 

<html>
<head>
    <meta charset="utf-8" />
    <title> Page Title </title>
    <meta name ="viewport" content="width= device-width, initial-scale=1">
    <script src="main.js"></script>
</head>
<body>
    <form action="">
        <input type="text" name="uid" placeholder="Username">
        <input id="loginPwdChange" type="password" name="pwd" placeholder="Password">
        <button onclick="changePwdView()"> Show/Hide </button>
        <button type="submit" name="submit"> Login </button>
    </form>
</body>
</html>

JS:

let loginPwdStatus = false;

function changePwdView(){

    let getLoginInput = document.getElementById("loginPwdChange");

    if(loginPwdStatus === false){
        getLoginInput.setAttribute("type", "text");
        loginPwdStatus = true;

    }else if(loginPwdStatus === true){
        getLoginInput.setAttribute("type", "password");
        loginPwdStatus = false;

    }

}

Check the image

Upvotes: 1

Views: 586

Answers (4)

CodeF0x
CodeF0x

Reputation: 2682

This is because your button to show / hide the password is submitting the form. When clicking the show / hide button, you need to prevent the form from submitting.

Two possible solutions:

With HTML only

Change your button to type="button". It will prevent the form from submitting.

let loginPwdStatus = false;

function changePwdView() {

  let getLoginInput = document.getElementById("loginPwdChange");

  if (loginPwdStatus === false) {
    getLoginInput.setAttribute("type", "text");
    loginPwdStatus = true;

  } else if (loginPwdStatus === true) {
    getLoginInput.setAttribute("type", "password");
    loginPwdStatus = false;
  }
}
<html>

<head>
  <meta charset="utf-8" />
  <title> Page Title </title>
  <meta name="viewport" content="width= device-width, initial-scale=1">
  <script src="main.js"></script>
</head>

<body>
  <form action="">
    <input type="text" name="uid" placeholder="Username">
    <input id="loginPwdChange" type="password" name="pwd" placeholder="Password">
    <button type="button" onclick="changePwdView()"> Show/Hide </button>
    <button type="submit" name="submit"> Login </button>
  </form>
</body>

</html>

With JavaScript

You can do this with preventDefault().

Mind the following things:

  • Pass the parameter event to your function when clicking the button: onclick="changePwdView(event)"
  • Don't forget the argument in your JS code: function changePwdView(event) { ... }
  • To prevent the form from submitting, use event.preventDefault();

let loginPwdStatus = false;

function changePwdView(event) {
  event.preventDefault();

  let getLoginInput = document.getElementById("loginPwdChange");

  if (loginPwdStatus === false) {
    getLoginInput.setAttribute("type", "text");
    loginPwdStatus = true;

  } else if (loginPwdStatus === true) {
    getLoginInput.setAttribute("type", "password");
    loginPwdStatus = false;
  }
}
<html>

<head>
  <meta charset="utf-8" />
  <title> Page Title </title>
  <meta name="viewport" content="width= device-width, initial-scale=1">
  <script src="main.js"></script>
</head>

<body>
  <form action="">
    <input type="text" name="uid" placeholder="Username">
    <input id="loginPwdChange" type="password" name="pwd" placeholder="Password">
    <button onclick="changePwdView(event)"> Show/Hide </button>
    <button type="submit" name="submit"> Login </button>
  </form>
</body>

</html>

Upvotes: 3

Abhishek
Abhishek

Reputation: 380

<button type="button" onclick="changePwdView()"> Show/Hide </button> can help

Cheers

Upvotes: 0

Suresh Prajapati
Suresh Prajapati

Reputation: 4467

Change your button tag to type="button"

<html>
<head>
    <meta charset="utf-8" />
    <title> Page Title </title>
    <meta name ="viewport" content="width= device-width, initial-scale=1">
    <script src="main.js"></script>
</head>
<body>
    <form action="">
        <input type="text" name="uid" placeholder="Username">
        <input id="loginPwdChange" type="password" name="pwd" placeholder="Password">
        <button onclick="changePwdView()"> Show/Hide </button>
        <button type="button" name="submit"> Login </button>
    </form>
</body>
</html>

And then you can add the handler to call ajax on Login button click

Upvotes: 1

Akhil Aravind
Akhil Aravind

Reputation: 6130

add type="button" to the show/hide button; 

let loginPwdStatus = false;

function changePwdView(){

    let getLoginInput = document.getElementById("loginPwdChange");

    if(loginPwdStatus === false){
        getLoginInput.setAttribute("type", "text");
        loginPwdStatus = true;

    }else if(loginPwdStatus === true){
        getLoginInput.setAttribute("type", "password");
        loginPwdStatus = false;

    }

}
<html>
<head>
    <meta charset="utf-8" />
    <title> Page Title </title>
    <meta name ="viewport" content="width= device-width, initial-scale=1">
    <script src="main.js"></script>
</head>
<body>
    <form action="">
        <input type="text" name="uid" placeholder="Username">
        <input id="loginPwdChange" type="password" name="pwd" placeholder="Password">
        <button onclick="changePwdView()" type="button"> Show/Hide </button>
        <button type="submit" name="submit"> Login </button>
    </form>
</body>
</html>

Upvotes: 0

Related Questions