Show/Hide Password in Two Inputs

Question

I' trying to build a form in which the users can change the values of two password inputs, one for a password and a second one to verify the password.

So in order to make the user aware of what he types and to make sure both of his/her password match with one another and tried to implemente a method in which he can just check a checkbox to show his password.

The current javascript method works with just one input but I would like to have it working with both input and not just one. I would like as well to show the password of both input without having to check their own corresponding checkbox(for example if a check one checkbox it should display text in both inputs).

This is the current javascript method that I have:

 // First Code // function addEvent (el, event, callback) { if ('addEventListener' in el) { el.addEventListener(event, callback, false); } else { el['e' + event + callback] = callback; el[event + callback] = function () { el['e' + event + callback](window.event); }; el.attachEvent('on' + event, el[event + callback]); } } function removeEvent(el, event, callback) { if ('removeEventListener' in el) { el.removeEventListener(event, callback, false); } else { el.detachEvent('on' + event, el[event + callback]); el[event + callback] = null; el['e' + event + callback] = null; } } // Second Code // (function() { var pwd = document.getElementById('password'); var chk = document.getElementById('showpass'); addEvent(chk, 'change', function(e) { var target = e.target || e.srcElement; try { if (target.checked) { password.type = 'text'; } else { password.type = 'password'; } } catch(error) { alert('This browser cannot switch type'); } }); }()); 

 <!-- First Password --> <div class="form-group"> <label for="password">Password</label> <div class="input-group date"> <div class="input-group-addon"> <i class="fa fa-lock" aria-hidden="true"></i> </div> <input type="password" name="password" value="" id="password" class="form-control"> <div class="input-group-addon"><input type="checkbox" id="showpass"></div> </div> </div> <!-- Second Password --> <div class="form-group"> <label for="password2">Confirm Password</label> <div class="input-group date"> <div class="input-group-addon"> <i class="fa fa-lock" aria-hidden="true"></i> </div> <input type="password" name="password2" value="" id="password2" class="form-control"> <div class="input-group-addon"><input type="checkbox" id="showpass"></div> </div> </div> 

Thanks in advance.

Answer 1

Change the type of both inputs at once:

var pwd = document.getElementById('password');
var confirm = document.getElementById('password2');

...

if (target.checked) {                  
    pwd.type = 'text';              
    confirm.type = 'text';              
} else {                               
    pwd.type = 'password';         
    confirm.type = 'password';              
}

Answer 2

Added a little fiddle to toggle the password type.

https://jsfiddle.net/xpvt214o/321232/

JS

var $vp = $('.vp');
$vp.on('click', function() {
    var $target = $(this).siblings('input[name*="password"]');
  if ($target.attr('type') == "password") {$target.attr('type','text');}
  else {$target.attr('type','password');}
});

HTML

<div style="width:100%;float:left;margin:0 0 16px 0;">
    <p>Password 1</p>
    <input type="password" name="password" val="" />
    <span class="vp">View password</span>
</div>
<div style="width:100%;float:left;margin:0 0 16px 0;">
    <p>Password 2</p>
    <input type="password" name="password2" val="" />
    <span class="vp">View password</span>
</div>

The function looks for the click event of the span "vp" and get's its sibling input element, checks the type attribute and toggles it to and from text/password. The name of the inputs must contain "password" (in lowercase).