Guys, I am new to javascript and I tried to change the type of a input using js.My work works well with Firefox and Chrome but not with IE.IE says This is the code I used to change the type. var email_type=document.getElementById("email"); email_type.type='text'; Code (markup): Please help me to debug this. Thanx.
Yeah, seems that IE doesn't allow you to change the type once the element has been created. When you run this in IE, the value attribute changes but the type does not. <html> <head> <script type="text/javascript"> window.onload = function() { var email_type = document.getElementById("email"); email_type.setAttribute('value', 'bar'); email_type.setAttribute('type', 'password'); } </script> </head> <body> <input id="email" type="text" value="foo" /> </body> </html> Code (markup): One way around it is to destroy the element and create a new element with a different type <html> <head> <script type="text/javascript"> window.onload = function() { var email_type = document.getElementById("email"); email_clone = email_type.cloneNode(true); email_clone.setAttribute('type', 'password'); document.body.appendChild(email_clone); document.body.removeChild(email_type); } </script> </head> <body> <input id="email" type="text" value="foo" /> </body> </html> Code (markup):
Replacing of the elements will also work: oldObject.parentNode.replaceChild(newObject,oldObject); Code (markup):