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:


<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>

Comments

Post a Comment

Popular posts from this blog

Mysql to CSV

-
Yesterday we have requirement to send report to our senior in excel format by retrieving data from database . Since there are only 10 rows so we can also manually create excel. But like other programmers, I am also very lazy, so that we create this script to export values from Mysql in csv format. mysql -u mysqlusername -p mysqlpass databsename -B -e "select * from \` tabalename \`;" | sed 's/\t/","/g;s/^/"/;s/$/"/;s/\n//g' > mysql_exported_table.csv After that we fount that there are many other programming methods to perform this task.
Read more

Secure server with Firewalld

-
Recently we have issue reported by development team that there one of the backend cache server went to production without firewall. Although server was not expose to internet but it can be accessible from every IP in intranet. We decided to use firewalld for this. Main problem was once we start service it stop all access other than ssh which can be impact service accessing to our server. Also we can't run firewall-cmd command to apply rule before staring service. Fortunately   firewalld provide option to apply rules by updating config xml files.  Its makes our task easy.  Steps to be perform task Generate xml rules in test machine. Copy xml rules file in target host  update rules in XML file then start service. ## Login to any test VM $ ssh ## Verify there is no custom added rule exist $ cat /etc/firewalld/zones/public.xml <?xml version="1.0" encoding="utf-8"?> <zone> <short>Public</short> <description>For use in public...
Read more

Setup K8s cluster via kubeadm

-
Kubernetes is an open source software tool for managing containerised workloads. It enables development teams to automate the deployment, scaling and management of applications. The kubeadm tool helps bootstrap a minimum viable Kubernetes cluster that conforms to best practices. This guide will walk you through how to install Kubernetes on Ubuntu 16.04. Prerequisites 3 Linux servers running Ubuntu 16.04 Access to a user account on each system with sudo or root privileges The apt package manager, included by default Command-line/terminal window (Ctrl-Alt-T) Steps to Install Kubernetes on Ubuntu Setup repository Get the Docker gpg key: $ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - Add the Docker repository: $ sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu \ $(lsb_release -cs) \ stable" Get the Kubernetes gpg key: $ curl -s https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key add - Add the...
Read more