Check if an Element is an Input using JavaScript

avatar

Borislav Hadzhiev

Mon Jan 10 20222 min read

banner

Photo by Nitish Meena

Check if an Element is an Input using JavaScript #

Use the tagName property to check if an element is an input, e.g. if (element.tagName.toLowerCase() === 'input') {}. The tagName property returns the tag name of the element on which it was accessed. Note that the property returns DOM tag names in uppercase.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <input type="text" id="first_name" name="first_name" /> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const element = document.getElementById('first_name'); // โœ… Check if element is an Input if (element.tagName.toLowerCase() === 'input') { console.log('element is an input'); } else { console.log('element is NOT an input'); } // โœ… Check if element is Textarea if (element.tagName.toLowerCase() === 'textarea') { console.log('element is a textarea'); } else { console.log('element is NOT a text area'); } // โœ… Check if element is input of specific type if ( element.tagName.toLowerCase() === 'input' && element.getAttribute('type') === 'text' ) { console.log('element is an input of type text'); } else { console.log('element is NOT an input of type text'); }

The tagName property returns the tag name of the element on which it was accessed.

It should be noted that DOM element names are upper-cased. For example, if accessed on an img element, the tagName property would return "IMG".

index.js
const element = document.getElementById('first_name'); console.log(element.tagName); // ๐Ÿ‘‰๏ธ "INPUT"

This is why we used the String.toLowerCase method to convert the result to lowercase.

Our second example checks if the element is a textarea.

In the third example, we check if the element is an input of type text.

index.js
const element = document.getElementById('first_name'); // โœ… Check if element is input of specific type if ( element.tagName.toLowerCase() === 'input' && element.getAttribute('type') === 'text' ) { console.log('element is an input of type text'); } else { console.log('element is NOT an input of type text'); }

We used the logical AND (&&) operator, which means that both conditions have to be met for the if block to run.

The getAttribute method returns the value of the provided attribute on the element.

If the attribute does not exist on the element, the method returns null or empty string, depending on the browser's implementation.

If you need to make sure that the value stored in the element variable is not null or undefined, use the optional chaining (?.) operator.

index.js
const element = null; // โœ… Check if element is an Input if (element?.tagName?.toLowerCase() === 'input') { console.log('element is an input'); } else { console.log('element is NOT an input'); } // โœ… Check if element is Textarea if (element?.tagName?.toLowerCase() === 'textarea') { console.log('element is a textarea'); } else { console.log('element is NOT a text area'); } // โœ… Check if element is input of specific type if ( element?.tagName?.toLowerCase() === 'input' && element?.getAttribute('type') === 'text' ) { console.log('element is an input of type text'); } else { console.log('element is NOT an input of type text'); }
You could get a null value back if you provide a non-existent id to the getElementById method or a non-existent selector to the querySelector method.

The optional chaining (?.) operator allows us to short-circuit if the reference points to a null or undefined value.

Instead of throwing an error, the operator short-circuits returning undefined.

In all three examples above, the else block is ran and no error is thrown.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee