How to Get Value of Text Input in JavaScript

Web developers often use text input in every website & web application to accept user input. So they need to be able to read the value entered in these text inputs. Although there are several third party libraries that allow you to do this, in this article, we will try to get value of text input in JavaScript.

How to Get Value of Text Input in JavaScript

Here are the different ways to get value of text input in JavaScript. Let us say you have the following text input.

<input name="my_text" type="text" id="my_text" class="my_text"/>

1. Using getElementById()

In this method, we use getElementById() function to select the text input by its ID attribute. Once it is selected we call its value attribute to retrieve the input value. Here is its syntax.

document.getElementById('textbox_id').value

Here is how to use it for our example.

document.getElementById('my_text').value

2. Using getElementsByClassName()

You can also use getElementsByClassName() function to select a text input by its class name and then retrieve its value. But since there can be multiple DOM elements with same class name, getElementsByClassName() function returns a collection.

document.getElementsByClassName('class_name')[whole_number].value

Since we get a collection of DOM elements as a result of calling getElementsByClassName() function, we need to use an index or whole number to refer to the correct element. Here is an example to select the first input element with class name ‘my_text’.

document.getElementsByClassName("my_text")[0].value;

3. Using getElementsByTagName()

Similarly, you can also use getElementsByTagName() function to select a text input by its HTML tag name. Here also, since there can be multiple DOM elements with the same tag, getElementsByTagName() function returns a collection of objects and we need to use an index or whole number to precisely select the right element. Here is its syntax.

document.getElementsByTagName('tag_name')[whole_number].value

and here is our example to select first input tag element.

document.getElementsByTagName('input')[0].value

4. Using getElementsByName()

You can also use getElementsByName() to select text input by its name. Since there can be multiple DOM elements with same name, this also returns a collection of elements. So we need to refer to our required element using an index or whole number.

document.getElementsByName('name')[whole_number].value

Here is our example to select the text input.

document.getElementsByName("my_text")[0].value;

5. Using querySelector()

Query Selector allows you to pick an element using a CSS selector. Here is its syntax.

document.querySelector('selector').value

Here is how to use it for our example.

document.querySelector('#my_text').value

The above method returns only one item since we are selecting it by its ID. If you use a different selector to select by the element’s class, tag or name, then it will return the first matching item.

document.querySelector('.my_text').value; // selected by class
document.querySelector('input').value; // selected by tagname
document.querySelector('[name="my_text"]').value; // selected by name

6. Using querySelectorAll()

You can also use querySelectorAll() which also uses CSS selector but returns all matching elements. So in this case also, you need to use an index or whole number to precisely select the right element.

document.querySelectorAll('selector')[whole_number].value

Here is how to select the element using its id, class, tag, or name.

document.querySelectorAll('#my_text')[0].value; selected by id
document.querySelectorAll('.my_text')[0].value; selected by class
document.querySelectorAll('input')[0].value; selected by tagname
document.querySelectorAll('[name="my_text"]')[0].value; selected by name

In this article, we have seen several different ways to get value of text input. The first & fifth methods directly returns the matching element, while the other methods return a collection of matching elements from whom we need to precisely get the correct element using an index.

How to Get Value of Text Input in JavaScript