Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by sammalayek
sammalayek
6,743 Points

Plz help me understand this stackoverflow.com Q&A

QUESTION:

Trying to change input type attribute from password to text.

$('.form').find('input:password').attr({type:"text"});

Why this doesn't work?

ANSWER:

You can't do this with jQuery, it explicitly forbids it because IE doesn't support it (check your console you'll see an error.

You have to remove the input and create a new one if that's what you're after, for example:

$('.form').find('input:password').each(function() {
   $("<input type='text' />").attr({ name: this.name, value: this.value }).insertBefore(this);
}).remove();

To be clear on the restriction, jQuery will not allow changing type on a <button> or <input> so the behavior is cross-browser consistent (since IE doens't allow it, they decided it's disallowed everywhere). When trying you'll get this error in the console: Error: type property can't be changed

++++++++++++++++++

Here's the Q&A: http://stackoverflow.com/questions/3541514/jquery-change-input-type

Here's the JSFiddle of the Q&A: http://jsfiddle.net/nick_craver/dHzzN/

sammalayek
sammalayek
6,743 Points 
$("<input type='text' />").attr({ name: this.name, value: this.value })

That is the part I don't understand.

2 Answers

Benjamin Payne
Benjamin Payne
8,142 Points

Hey Sam, There were several errors in the code that I fixed up. Essentially all that this is doing is finding all the elements that are password fields input[type='password'] in the form and then using the insertBefore method to insert a text field with the password inputs name and value and then deleting the password field.

Loop through each password field in the form

$('.form').find("input[type='password']").each(function() {

Insert before that password element a text element with that password elements name and value

$("input[type='text']").attr({ name: $(this).name, value: $(this).value }).insertBefore($(this));

Delete the password element

}).remove();

All together

$('.form').find("input[type='password']").each(function() {
    $("input[type='text']").attr({ name: $(this).name, value: $(this).value }).insertBefore($(this));
}).remove();

Let me know if that helps man

Best, Ben

sammalayek
sammalayek
6,743 Points
sammalayek
sammalayek
6,743 Points

That makes sense, thanks!

I ended up using that code like this in my script:

jQuery(document).ready(function($) {
    if(window.location.href.indexOf("membership-options") > -1) {
        $(document).find('input:image').each(function() {
           $("<button>Buy</button>").insertBefore(this);
        }).remove();
    }
});