I never had noticed this before, but a little while ago I found out that changing the type attribute on an input box doesn’t work in Internet Explorer. Not in IE6 and even not in IE7.

I tried element.type="text"; and element.setAttribute("type", "text"); but both methods didn’t work. Strange, because these methods won’t give any problems for setting any other attribute. Sigh.. that Microsoft again…

Fortunately there is a solution. It’s a little dirty and extensive, but hey, it works! The basic idea is that you have to create an new input element and replace it with the old one. The paradox here is that you can set the type attribute for newly created objects with no problems, but editing an existing one give problems. Why? I don’t know. But I’m happy that there’s a solution :-)

Anyway, here’s the code:

function changeInputType(oldObject, oType) {
	var newObject = document.createElement('input');
	newObject.type = oType;
 
	// 'Copy' old types to new element
	if(oldObject.size)
		newObject.size = oldObject.size;
	if(oldObject.value)
		newObject.value = oldObject.value;
	if(oldObject.name)
		newObject.name = oldObject.name;
	if(oldObject.id)
		newObject.id = oldObject.id;
	if(oldObject.className)
		newObject.className = oldObject.className;
 
	// replace old object with new one
	oldObject.parentNode.replaceChild(newObject,oldObject);
	return newObject;
}

Changing type attribute in IE is a post from: arjansnaterse.nl