How can I check if an element is a drop down list element or a text input element, given its id?

In Javascript, given the id of an element (in a String format), how can I check if the id of the element refers to a drop down list element, or a text input element?

The function should return true if the id refers to a drop down list (<select>) element, or a text input element, and false otherwise.

Answers


Try using: document.getElementById('idNameGoesHere').tagName

So the function could be:

function isSelectOrTextField(idName) {
    var element = document.getElementById(idName);
    if(element.tagName === 'SELECT') {return true;}
    if(element.tagName === 'INPUT' && element.type === 'text') {return true;}
    return false;
}

You could expand this to check for <textarea> as well.

EDIT : Or choose jbabey's answer as it's using nodeName and is better formatted.

apparently nodeName has wider browser support.


If you already have jquery included, you can use the is function :

$('#myid').is('input, select')

or maybe

$('#myid').is('input, textarea, select')

if you want to also include textarea

or

$('#myid').is('input:not([type="button"]), textarea, select')

(this one returns true if it's a textare or a dropdown or an input that is not a button).

You have the whole power of jquery selectors to adapt your query to your exact needs.

Demonstration : http://jsfiddle.net/ELuEJ/ (try to change the html)


You can use the nodeName and type properties of the DOM elements to determine this. No external libraries are required.

var isSelectOrTextInput = function (element) {
    var nodeName = element.nodeName;

    return nodeName === 'SELECT' || 
        (nodeName === 'INPUT' && 
         element.type.toLowerCase() === 'text');
};

Working sample: http://jsfiddle.net/ytHQD/


$('#myId')[0].tagName

you can retrive the dom element and then check the tagName


Need Your Help

Finding missing Maven artifacts

eclipse maven dependencies

I'm new to Maven, and struggling with adding dependencies. I'm trying to convert an existing project to Maven, and after adding the dependencies for all the jars in my referenced libraries, I'm rec...

How to display binary data as image in React?

javascript node.js reactjs

I am receiving a bindata from the Nodejs server and now from that I need to display an image.