replace input with javascript

Question

Hello everybody I'm trying to replace the 'text' input type to 'password' . And it works with following code :

function replaceT(obj){
            var newO=document.createElement('input');
            newO.setAttribute('type','password');
            newO.setAttribute('name',obj.getAttribute('name'));
            obj.parentNode.replaceChild(newO,obj);
            newO.focus();
            }

But I want to add class of my previous input to the new input and I tried something like this :

function replaceT(obj){
            var newO=document.createElement('input');
            newO.setAttribute('type','password');
            newO.setAttribute('className' obj.getAttribute('class'));
            newO.setAttribute('name',obj.getAttribute('name'));
            obj.parentNode.replaceChild(newO,obj);
            newO.focus();
            }

What am I doing wrong, or if that is not possible, how to set the new class manually .. Thank you

David Hedlund · Accepted Answer · 2009-12-15 12:13:36Z

2

This should work across all browsers:

newO.className = obj.className;

I'm not sure whether you should use className or class in setAttribute, but whatever it is, it is definitely the same as in getAttribute, so this is definitely wrong:

newO.setAttribute('className' obj.getAttribute('class'));

answered Dec 15, 2009 at 12:13

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

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

3 Comments

ant Over a year ago

Follow up .. is it possible to add onclick .. and other events to newly created input element ?

David Hedlund Over a year ago

well yes, it is definitely possible. for starters, you'd want to look at attachEvent for IE and addEventListener for all others, but for absolute compatibility you really want to look into a framework, such as jQuery, for this.

NickFitz Over a year ago

Just to expand on this: class should work for setAttribute and getAttribute but, of course, IE gets it wrong (except IE8 in IE8 mode), and I believe other browsers have had to do IE's thing as well as the right thing for compatibility reasons :-( David's method using the className property will work everywhere.

Serhat Ozgel · Accepted Answer · 2009-12-15 12:12:09Z

2

newO.setAttribute('className' obj.getAttribute('class'));

You are using 'className' for setting the attribute, but 'class' for getting it. Both must be 'className'.

answered Dec 15, 2009 at 12:12

Serhat Ozgel

23.8k29 gold badges106 silver badges142 bronze badges

4 Comments

ant Over a year ago

well I read some articles .. just got confused .. anyways which is the solution , is it class or className?

Serhat Ozgel Over a year ago

Edited to give the actual answer.

Serhat Ozgel Over a year ago

I tried it and it definitely works. May be it does not work for you because you are missing the comma between the two parameters?

NickFitz Over a year ago

@Serhat: using className that way works differently on different browsers; see my comment on David Hedlund's answer: stackoverflow.com/questions/1907006/…

Mario Mikić · Accepted Answer · 2009-12-15 12:24:12Z

0

Sorry for going in the other direction, but why do you replace the element instead of just changing its type in the first place? Than you won't need to worry about adding the same className to the new element.

Just being curious.

answered Dec 15, 2009 at 12:24

Mario Mikić

571 silver badge4 bronze badges

2 Comments

ant Over a year ago

Because I want to add label to the field "Password", if I change it at first to type password then it will be masked .. razumijes :D

NickFitz Over a year ago

IE (6 and 7, not tried in 8) will throw an exception if you try to change the type of an input element after it has been added to the document (even if you try to remove it, change it, then re-add it).

Collectives™ on Stack Overflow

replace input with javascript

3 Answers 3

3 Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related