How to have two password fields controlled by one checkbox?

Question

<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>

score 0 · Answer 1 · answered Dec 20 '10 at 16:31

Why don't you just change the type attribute of the password inputs in your unmask() function? That way it will be easier for you to manage more than 1 field. After checking whether you have to turn the input into a text one or a password one, do this:

// Suppose 'new_type' is either 'text' or 'password'
// and that 'pwd' and 'pwd2' are the id attributes for
// both of your password fields
document.getElementById('pwd').type = new_type;
document.getElementById('pwd2').type = new_type;

score 0 · Answer 2 · answered Dec 20 '10 at 16:34

I suggest changing your approach a bit.

You could modify the client with no impact to the server code. For example, I would try using 2 input boxes with the same name. If you ever have one box visible while the other one has the 'disabled' HTML attribute set, the visible box will always be the only one submitted.

This way, your server-side code would only have to look for 1 input, under a single name.

zsalzbank · Answer 3 · 2010-12-20T17:38:29.970

Try this:

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) {
    for (var f in new Array('pwd', 'pwd2')) {
        oldElem = document.getElementById(f);
        elem = document.createElement('input');
        elem.setAttribute('type', (truefalse == true ? 'text' : 'password'));
        elem.setAttribute('value', document.getElementById(f).value);
        elem.id = f;
        oldElem.parentNode.replaceChild(elem, oldElem);
        document.getElementById(f).onkeypress = function (e) {
            chkCaps(e);
        };
    }
}
//end function
document.getElementById('pwd').onkeypress = function (e) {
    chkCaps(e);
};
document.getElementById('pwd2').onkeypress = function (e) {
    chkCaps(e);
};

What this does is make it so your code works on pwd and pwd2 by repeating it for each element in the array new Array('pwd', 'pwd2').

That works for caps alert on both fields, bu the checkbox does nothing now. — David, Dec 20 '10 at 16:43
try now - I'm doing this off the top of my head, sorry. I changed the array initialization — zsalzbank, Dec 20 '10 at 17:39

score 0 · Answer 4 · answered Dec 20 '10 at 16:36

jQuery caps lock test/function? set both fields to class of password and:

jQuery('.password').caps(function(caps){
    if(jQuery.browser.safari) return; // Safari already indicates caps lock
    // "this" is current element
    if(caps){
        alert('Your caps lock is on!');
    }else{
        // no caps lock on
    }
});

score 0 · Accepted Answer · edited May 23 '17 at 11:55

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

How to have two password fields controlled by one checkbox?

5 Answers5