How to Get All Textboxes in a Form using JavaScript

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

JavaScript getElementsByTagName() method provides a convenient way to extract all the elements in a document by their tag names. Once you have the 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 input elements on my web page. I only want elements of type text. Once I know their type, I want to know their attributes, like the id, the event attached to the textbox etc.

// TEXTBOX ELEMENTS
<div>
    Name: <input type="text" id="txtName" onblur="verify(this)" />
    Age: <input type="text" id="txtAge" onfocus="this.value='30'" />
</div>

// OTHER ELEMENTS    
<p><input type="checkbox" id="chk" /> Hello</p>

<div>
    <p><input type="radio" name="country" value="India" checked /> India</p>
    <p><input type="radio" name="country" value="USA" /> USA</p>
</div>
    
<p>
    <input type="button" id="bt" onclick="getCount()" value="Find Textboxes" />
</p>

The Script

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

<script>
    function getCount() {

        // GET ALL THE INPUT ELEMENTS.
        var ele = document.getElementsByTagName('input');

        // LOOP THROUGH EACH ELEMENT.
        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++) {
                    console.log(ele[i].attributes[j]);
                }
            }
        }
    }    
</script>

See this demo

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

Syntax

document.getElementsByTagName(tagname)

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

← PreviousNext →