jquery checkbox to set input type

Question

I have a html page which requires two passwords, if these do not match a div appears to say so. Within the div a checkbox is also shown when the user checks this it should change the password type to text and vice versa. I seem to be having problems detecting if the checkbox is detected or not.

$("#password_error").html('Passwords do not match <br /> <span class="password_error"><input type="checkbox" id="password_text" /> Show Characters</span>');
  $("#password_error").show("slow");
  checkbox_status();

function checkbox_status()
{
 if ($('#password_text').is(':checked'))
 {
  $('input:password[type="text"]');
 }
}

The ID on the input box for password is "password".

Any advice? Thanks

Be aware that IE has issues with this behaviour (changing from type="password" to type="text" isn't allowed, and can't be set via JS): alistapart.com/articles/the-problem-with-passwords . — David Thomas
– David Thomas, Commented Sep 20, 2010 at 21:07

A Wizard Did It · Accepted Answer · 2010-09-20 21:14:07Z

3

You can use:

$('#check').attr('checked');

It will show true or false.

Example

As Dave pointed out, changing the type isn't a good idea, a better idea is to have two inputs, one text and one password. Start with the password showing and the text hidden, that way if javascript is disabled it degrades peacefully. You can then toggle each and update the value on check. Here's a working example:

$(document).ready(function() {
    $('#check').click(function() {
        if ($(this).attr('checked')) {
            $('#plaintext').show().val($('#password').val());
            $('#password').hide();
        } else {
            $('#password').show().val($('#plaintext').val());
            $('#plaintext').hide();
        }
    });
});

http://jsfiddle.net/P8tg5/

edited Sep 20, 2010 at 21:14

answered Sep 20, 2010 at 21:04

A Wizard Did It

3,6944 gold badges32 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

A Wizard Did It Over a year ago

I don't have enough rep to post two links apparently... odd. Anyways, I just took the first example off and added the functional example.

Elliott Over a year ago

Looks good, I will try it thanks :) Your rep will build fast if all your answers are like this haha.

Praveen Prasad · Accepted Answer · 2010-09-20 21:32:55Z

0

working Demo

http://jsfiddle.net/sB9NJ/

html

   password: <input type='password' id='password1'><br>
    retype password: <input type='password' id='password2'><br>
    <div id='messageHolder' style="display:none">
    show passwords<input type='checkbox' id='togglePassword' />
    </div>

Javascript

      jQuery(function(){
   jQuery('#password2').bind('blur',_checkPasswords);
    jQuery('#togglePassword').bind('change',_togglePasswordText);
});

    function _checkPasswords()
    {
        if(jQuery('#password1').val()!=jQuery('#password2').val())
        {
             jQuery('#messageHolder').show();
        }
    }

function _togglePasswordText()
{
  if(jQuery('#togglePassword').is(':checked'))
    {       
        jQuery('#password2,#password1').each(function(){
            var _elm= jQuery(this);
            var _val=_elm.val();
            var _id= _elm.attr('id')
            jQuery(this).replaceWith('<input id='+_id+' value='+_val+' type="text">')
        });
     }
   else
   {
        jQuery('#password2,#password1').each(function(){
            var _elm= jQuery(this);
            var _val=_elm.val();
            var _id= _elm.attr('id')
            jQuery(this).replaceWith('<input id='+_id+' value='+_val+' type="password">')
        });
   }
}

edited Sep 20, 2010 at 21:32

answered Sep 20, 2010 at 21:15

Praveen Prasad

32.2k20 gold badges77 silver badges106 bronze badges

4 Comments

Elliott Over a year ago

Thanks but I get the error in firebug: uncaught exception: type property can't be changed

David Thomas Over a year ago

@Elliott: the same error is reported in Web Inspector for Chrome (Ubuntu 10.04).

Praveen Prasad Over a year ago

actually browsers dont allow password type to be changed to text: that's why it was throwing error . just fixed it. check the demo. check box will appear only after there is a mismatch found in both passwords

Elliott Over a year ago

Could you explain the "bind" event if possible? Thanks

Collectives™ on Stack Overflow

jquery checkbox to set input type

2 Answers 2

Example

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Example

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related