Search code examples
phpjavascriptpasswordbox

How to have two password fields controlled by one checkbox?


<form> 
<fieldset> 
Password: <span id="capsalert">CAPS LOCK = on</span><br> 
<input type="password" id="pwd">
<script type="text/javascript">
  document.write(
    '<input type="checkbox" name="masking" onclick="unmask(this.checked)"> ' + 
    'Show the password as I type' 
  ); 
</script> 
<br>
Password2:<br> 
<input type="password" id="pwd2">
</fieldset> 
</form> 
<script type="text/javascript"> 
function chkCaps(e) { 
ev = (e ? e : window.event); 
kc = (ev.which ? ev.which : (ev.keyCode ? ev.keyCode : false)); 
sk = (ev.shiftKey ? ev.shiftKey : (ev.modifiers ? !!(ev.modifiers & 4) : false)); 
if( 
  (kc >= 97 && kc <= 122 && sk) ||
  (kc >= 65 && kc <= 90 && !sk) 
) { 
  document.getElementById('capsalert').style.display = 'inline'; 
} 
else { 
  document.getElementById('capsalert').style.display = 'none'; 
}//end if
}//end function 
function unmask(truefalse) {  
oldElem = document.getElementById('pwd');
elem = document.createElement('input');
elem.setAttribute('type', (truefalse == true ? 'text' : 'password'));
elem.setAttribute('value', document.getElementById('pwd').value);
elem.id = 'pwd';
oldElem.parentNode.replaceChild(elem,oldElem);

document.getElementById('pwd').onkeypress = function(e) { chkCaps(e); }; 
}//end function
document.getElementById('pwd').onkeypress = function(e) { chkCaps(e); }; 
</script>  

I'm using the above code in a slightly more complex form.

I have two separate "password" fields on the form. With the current code I can have the first password field show the characters as they are typed when the checkbox is ticked.

Also, the code notifies the user if they are typing with CAPS Lock enabled.

I would like to have both password fields exhibiting the same behavior rather than the first field only. Unfortunately, I do not know how to make that happen.

Thanks for the help.

EDIT:
A simple solution might be easier to find with the following code. I'm willing to use either one.

<script>
function changeType()
{
    document.myform.pass.type=(document.myform.option.value=(document.myform.option.value==1)?'-1':'1')=='1'?'password':'text';
}
</script>

<body>
<form name="myform">
   <input type="password" name="pass" />
   <input type="password" name="pass2" />
   <input type="checkbox" name="option" value='1' onchange="changeType()" />
</form>
</body>

Solution

  • Most of the answers didn't work. One or two I left untried because they meant greater changes to my code than I wanted. I ended up finding yet another method to reveal the passwords: "Show password as text" control
    I adapted the method there to my multiple password fields scenario:

    <input type="checkbox" onchange="document.getElementById('gpwd').type = this.checked ? 'text' : 'password'; document.getElementById('pwd1').type = this.checked ? 'text' : 'password'; document.getElementById('pwd2').type = this.checked ? 'text' : 'password'"> Reveal passwords