Change Input Element Type using JavaScript
You can change an input element's type, from text to password, or hidden to text for example, dynamically using JavaScript.
There are a few reasons why one might need to change the type of an input element dynamically:
- To have a password box initially display 'type password here', but convert to a password element once it takes the focus.
- To make a hidden form field visible by converting it to a text element, or vice versa.
- Allow a user to only enter a value once by converting the element to hidden once text has been entered
If you are designing a site that is intended only to run on Mozilla, Safari, or another non-Internet Explorer browser, the following code is sufficient to modify an input element's type:
<input type="hidden" name="myElement" id="myElement" value="some text" />
<script>
document.getElementById('myElement').type = 'text';
</script>However, most of us find it necessary to submit to the demands of Internet Explorer. To meet these demands, we must:
- dynamically create a new element
- copy the properties of the old element into the new element
- set the type of the new element to the new type
- then replace the old element with the new element
The function below accomplishes the above tasks for you:
<script>
function changeInputType(oldObject, oType) {
var newObject = document.createElement('input');
newObject.type = oType;
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;
oldObject.parentNode.replaceChild(newObject,oldObject);
return newObject;
}
</script>
Need assistance with your project? Universal Web Services can help.
Contact us to request a quote.