CODEWITHSUNDEEP
javascripthtmlcssfont-awesome-5
user10705797
user10705797

Reputation:

How to set password visible on click of icon

I have three input fields all of them are password fields what i am trying to do is to put and fontawesome icon inside the input field on click which shows or hide the password

currently i have this but with button,and its doing only for one field not for all three fields, do i have to call 3 different functions for all three or it can be done with same function

snippet

function show() {
  var a = document.getElementById("confirm_password");
  var b = document.getElementById("display2");
  if (a.type == "password") {
    a.type = "text";

  } else {
    a.type = "password";

  }
}
<div class="col-lg-3">
  <h5 id="commonHeader">Current Password</h5>
  <input type="password" id="currentPass" name="currentpass" class="commanClass" placeholder="Current Password">
  <button type="button" onclick="show()" id="display"></button>
</div>
<div class="col-lg-3">
  <h5 id="commonHeader">New Password</h5>
  <input type="password" id="newPass" name="newpass" required="required" class="commanClass" placeholder="Current Password">
  <button type="button" onclick="show()" id="display1"></button>

</div>
<div class="col-lg-3">
  <h5 id="commonHeader">Confirm Password</h5>
  <input type="password" id="confirm_password" required="required" placeholder="Confirm Password">
  <button type="button" onclick="show()" id="display2"></button>
</div>

<div>
  <hr>
  <br>
  <button type="submit" id="save" class="commonButton">Save</button>
  <button type="button" id="save" class="commonButton">Clear</button>
</div>

in my snippet i have 3 input fields to all of which i have to provide a icon on which if user click it will show the password of current field

Currently it is working for one field only

Upvotes: 2

Views: 9044

Answers (4)

Piyush Verma
Piyush Verma

Reputation: 295

function show(inputId) {
  var a = document.getElementById(inputId);
  if (a.type === "password") {
    a.type ="text";

  } else {
    a.type ="password";

  }
}
.show-button{
  position:absolute;
  right:22px;
  top: 32px;
  border:0px;
  background-color:transparent;
}
input{
width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-12 ">
  <h5 id="commonHeader">Current Password</h5>
  <input type="password" id="currentPass" name="currentpass" class="commanClass" placeholder="Current Password">
  <button class="show-button" type="button" onclick="show('currentPass')" id="display"><i class="fa fa-eye"></i></button>
</div>
<div class="col-12">
  <h5 id="commonHeader">New Password</h5>
  <input type="password" id="newPass" name="newpass" required="required" class="commanClass" placeholder="Current Password">
  <button type="button" class="show-button" onclick="show('newPass')" id="display1"><i class="fa fa-eye"></i></button>

</div>
<div class="col-12">
  <h5 id="commonHeader">Confirm Password</h5>
  <input type="password" id="confirm_password" required="required" placeholder="Confirm Password">
  <button class="show-button" type="button" onclick="show('confirm_password')" id="display2"><i class="fa fa-eye"></i></button>
</div>

<div>
  <hr>
  <br>
  <button type="submit" id="save" class="commonButton">Save</button>
  <button type="button" id="save" class="commonButton">Clear</button>
</div>

Pass the id of the input in your function and you will be good. Hope it helps.

Upvotes: 1

ellipsis
ellipsis

Reputation: 12152

You can use removeAttribute to remove the type="password" and use setAttribute to set type as text simultaneously

function show(a) {
  var x=document.getElementById(a);
  var c=x.nextElementSibling
  if (x.getAttribute('type') == "password") {
  c.removeAttribute("class");
  c.setAttribute("class","fas fa-eye");
  x.removeAttribute("type");
    x.setAttribute("type","text");
  } else {
  x.removeAttribute("type");
    x.setAttribute('type','password');
 c.removeAttribute("class");
  c.setAttribute("class","fas fa-eye-slash");
  }
}
  
   
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="col-lg-3">
  <h5 id="commonHeader">Current Password</h5>
  <input type="password" id="currentPass" name="currentpass" class="commanClass" placeholder="Current Password">
  <i onclick="show('currentPass')" class="fas fa-eye-slash" id="display"></i>
</div>
<div class="col-lg-3">
  <h5 id="commonHeader">New Password</h5>
  <input type="password" id="newPass" name="newpass" required="required" class="commanClass" placeholder="Current Password">
 <i onclick="show('newPass')" class="fas fa-eye-slash" id="display"></i>

</div>
<div class="col-lg-3">
  <h5 id="commonHeader">Confirm Password</h5>
  <input type="password" id="confirm_password" required="required" placeholder="Confirm Password">
 <i onclick="show('confirm_password')" class="fas fa-eye-slash" id="display"></i>
</div>

<div>
  <hr>
  <br>
  <button type="submit" id="save" class="commonButton">Save</button>
  <button type="button" id="save" class="commonButton">Clear</button>
</div>

Upvotes: 3

Aaditya Thakkar
Aaditya Thakkar

Reputation: 1820

You can achieve this with a single function which takes inputElementId as argument: 

function show(inputElementId) {
  var a = document.getElementById(inputElementId);
  if (a.type == "password") {
    a.type = "text";

  } else {
    a.type = "password";

  }
}

You can call it 3 times like this: 

<div class="col-lg-3">
  <h5 id="commonHeader">Current Password</h5>
  <input type="password" id="currentPass" name="currentpass" class="commanClass" placeholder="Current Password">
  <button type="button" onclick="show(currentPass)" id="display"></button>
</div>
<div class="col-lg-3">
  <h5 id="commonHeader">New Password</h5>
  <input type="password" id="newPass" name="newpass" required="required" class="commanClass" placeholder="Current Password">
  <button type="button" onclick="show(newPass)" id="display1"></button>

</div>
<div class="col-lg-3">
  <h5 id="commonHeader">Confirm Password</h5>
  <input type="password" id="confirm_password" required="required" placeholder="Confirm Password">
  <button type="button" onclick="show(confirm_password)" id="display2"></button>
</div>

<div>
  <hr>
  <br>
  <button type="submit" id="save" class="commonButton">Save</button>
  <button type="button" id="save" class="commonButton">Clear</button>
</div>

Upvotes: 1

Jigar
Jigar

Reputation: 3261

If you want to make it dynamic for all then you need to pass the id of the textbox on function call and then you can use that id to perform logic dynamically.

function show(id) {
  var a = document.getElementById(id);
  if (a.type == "password") {
    a.type = "text";

  } else {
    a.type = "password";

  }
}
<div class="col-lg-3">
  <h5 id="commonHeader">Current Password</h5>
  <input type="password" id="currentPass" name="currentpass" class="commanClass" placeholder="Current Password">
  <button type="button" onclick="show('currentPass')" id="display"></button>
</div>
<div class="col-lg-3">
  <h5 id="commonHeader">New Password</h5>
  <input type="password" id="newPass" name="newpass" required="required" class="commanClass" placeholder="Current Password">
  <button type="button" onclick="show('newPass')" id="display1"></button>

</div>
<div class="col-lg-3">
  <h5 id="commonHeader">Confirm Password</h5>
  <input type="password" id="confirm_password" required="required" placeholder="Confirm Password">
  <button type="button" onclick="show('confirm_password')" id="display2"></button>
</div>

<div>
  <hr>
  <br>
  <button type="submit" id="save" class="commonButton">Save</button>
  <button type="button" id="save" class="commonButton">Clear</button>
</div>

Upvotes: 2

Related Questions