How to Get All Textboxes in a Form using JavaScript

HTML input elements within a form element allows users to input data. However, an input element’s functions vary depending upon its “type” attributes, such as, text, button, radio etc. How do we separate textboxes from other element? I’ll show you how you can get all textboxes and their attributes from a group of elements in a form using only JavaScript.

The getElementsByTagName() method in JavaScript, provides a convenient way to extract all the elements in a document by their tag names. Once you have elements, you can check the type of each element and accordingly get their attributes and values.

See this Demo

This method is useful, when you want to focus or extract data from a particular set of elements, say only textboxes, or any other element.

The Markup

I have few different types of input elements on my web page. I only want input elements of type text. Once I know their type, I wish to know their attributes, like the id, the event attached to the textbox etc.

    Name: <input type="text" id="txtName" onblur="verify(this)" />
    Age: <input type="text" id="txtAge" onfocus="this.value='30'" />
<p><input type="checkbox" id="chk" /> Hello</p>

<div style="border:solid 1px #CCC;width:300px;">
    <p><input type="radio" name="country" value="India" checked /> India</p>
    <p><input type="radio" name="country" value="USA" /> USA</p>
    <input type="button" id="bt" onclick="getCount()" value="Find Textboxes" />
The Script

I have a function that will be called upon button click. The button can also be a submit button. I am using the getElementsByTabName() method to get all the elements in the form.

    function getCount() {

        var ele = document.getElementsByTagName('input');

        for (i = 0; i < ele.length; i++) {

            // CHECK THE ELEMENT TYPE.
            if (ele[i].type == 'text') {
                console.log('Value: ' + ele[i].value);

                for (j = 0; j < ele[i].attributes.length; j++) {

There are two ways you can use the getElementsByTagName() method in your script. First see the syntax.



The method takes a parameter in the form of tagname. In the above script, I have explicitly defined the parameter as input. It will look for elements of type input. However, you can also use * as parameter and the method will return all the elements (any type).

var ele = document.getElementsByTagName('*');

In both the ways, you will get the result you want, that is textboxes. Since, I am checking the type of each element inside the first for loop.

if (ele[i].type == 'text')
{ }

The second loop checks for the attributes defined to the textboxes.

See this Demo

Thanks for reading.

Previous - How to Disable or Enable Submit Button using JavaScript disabled PropertyNext - How to Get the Length of an Object in JavaScript

Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner

Related Posts:

Join our Google Plus Community and be a part of a discussion!