Why isn't this code jquery working?

Question

Possible Duplicate:
changing password field to text with checkbox with jquery

The code is supposed to check if a checkbox is checked, then change a password field from password to regular text and vice versa.

$('#cpassword_lf').change(function(){
     if($('#cpassword_lf').is(':checked'))
     {
        $('#password_loginform').attr('type', 'text'); 
     }
     else
     {
         $('#password_loginform').attr('type', 'password'); 
     }  
 });

Need more info! Browser, errors, etc – epascarello Feb 04 '12 at 23:48 — epascarello, Feb 04 '12 at 23:48

score 6 · Accepted Answer · answered Feb 04 '12 at 23:54

You aren't allowed to change the type attribute, here is a simple solution to do the same thing though: http://jsfiddle.net/ryWgY/2

HTML:

<input type="checkbox" id="cpassword_lf" />
<input type="password" id="password_loginform_hidden" />
<input type="text" id="password_loginform_clear" />

Javascript:

$(function ()
{
    $('#password_loginform_clear').hide();
    $('#cpassword_lf').change(function()
    {
         if(!$('#cpassword_lf').is(':checked'))
         {
             $('#password_loginform_clear').hide();
             $('#password_loginform_hidden').show();

             $('#password_loginform_hidden').val($('#password_loginform_clear').val());
             $('#password_loginform_clear').val('');
         }
         else
         {
             $('#password_loginform_clear').show();
             $('#password_loginform_hidden').hide();

             $('#password_loginform_clear').val($('#password_loginform_hidden').val());
             $('#password_loginform_hidden').val('');
         }  
    });
});

Edited to include the code, thanks for reminding. Wish SO had a similar solution to jsfiddle (it's so nice!) — Ben, Feb 05 '12 at 00:01

score 2 · Answer 2 · answered Feb 04 '12 at 23:54

From the jQuery documentation on attr:

jQuery prohibits changing the type attribute on an or element and will throw an error in all browsers. This is because the type attribute cannot be changed in Internet Explorer.

See linked questions for various solutions to this problem.

As a side note, inside the event handler this will refer to the element that has changed, so you don't need to use a selector again:

$("#someElem").change(function() {
    //$(this) == $("#someElem")
});

score 0 · Answer 3 · edited May 23 '17 at 09:59

0

For security reasons, browsers typically won't allow you to change the type of an input. Here are some suggested solutions:

jQuery: Change element type from hidden to input

edited May 23 '17 at 09:59

Community

1
1

answered Feb 04 '12 at 23:53

srchulo

4,843
4
38
68

vol7ron · Answer 4 · 2012-02-05T00:08:36.823

0

Instead of .attr try using .prop

$('#cpassword_lf').change(function(){
   if($(this).is(':checked'))
      $('#password_loginform').prop('type', 'text');
   else
      $('#password_loginform').prop('type', 'password');    
});

Not sure what the downvote was about: http://jsfiddle.net/vol7ron/qMhug/ Seems to work in Chrome, FF, and Safari (can't test in IE atm)

edited Feb 05 '12 at 00:08

answered Feb 04 '12 at 23:55

vol7ron

35,981
19
104
164

1

Does not solve the issue (see other answers) and should be noted that using `attr` in place of `prop` is only an issue in jQuery 1.6 and up. – Sparky Feb 04 '12 at 23:57
I don't know, works for me in Safari and Chrome: http://jsfiddle.net/vol7ron/qMhug/ – vol7ron Feb 05 '12 at 00:04
As per answer by James, it's really an Explorer issue. – Sparky Feb 05 '12 at 00:06
Well he was right about this, but attr and prop are not the same - I don't get an error in every browser - could you test IE for me? – vol7ron Feb 05 '12 at 00:12
In IE 8, I get a jQuery error, _"Could not get the type property. This command is not supported."_ – Sparky Feb 05 '12 at 00:32
Are you sure? I tried it in IE9 or 10 and it worked. – vol7ron Feb 05 '12 at 00:34
I'm 100% positive. IE 8 in XP... the error I posted was a cut & paste from your jsFiddle here: http://jsfiddle.net/vol7ron/qMhug/ – Sparky Feb 05 '12 at 01:19
ahh i confirmed IE9 Win7 is good, but that makes sense since MS made all though compliancy improvements – vol7ron Feb 05 '12 at 02:33

score -1 · Answer 5 · edited May 23 '17 at 12:20

-1

As others have stated: this is pretty much a duplicate of jQuery: Change element type from hidden to input.

Applying the answer to that question to your specific case, you end up with this.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('#cpassword_lf').change(function(){
    var pass_or_text_input = $('#password_loginform');
    var marker = $('<span />').insertBefore(pass_or_text_input);
    pass_or_text_input.detach();
    if ($('#cpassword_lf').is(':checked')) {
      pass_or_text_input.attr('type', 'text'); 
    } else {
      pass_or_text_input.attr('type', 'password'); 
    }
    pass_or_text_input.insertAfter(marker);
    marker.remove();
  });
});
</script>
<input id="cpassword_lf" type="checkbox"></input>
<input id="password_loginform" value="secret"></input>

edited May 23 '17 at 12:20

Community

1
1

answered Feb 04 '12 at 23:59

Grilse

2,481
2
20
29

As others have already stated, jQuery will not allow you to change the `type` attribute because of issues with Explorer. – Sparky Feb 05 '12 at 00:00
@Sparky672: This snippet doesn't work in IE9, but it works in FF and Chrome, so I figured it worth mentioning. – Grilse Feb 05 '12 at 00:04
Welcome to SO... where not everything is worth mentioning (as an answer). – Sparky Feb 05 '12 at 00:08

Why isn't this code jquery working?

5 Answers5