How to Get the Value of Text Input Field Using JavaScript

In this tutorial, you will learn about getting the value of the text input field using JavaScript. There are several methods used to get an input textbox value without wrapping the input element inside a form element. Let’s show you each of them separately and point out the differences.

The first method uses document.getElementById('textboxId').value to get the value of the box:

JavaScript: document.getElementById()

javascript

document.getElementById("inputId").value;

JavaScript: document.getElementById()

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
  </head>
  <body>
    <input type="text" placeholder="Type " id="inputId" />
    <button type="button" onclick="getInputValue();">Get Value</button>
    <script>
      function getInputValue() {
        // Selecting the input element and get its value 
        let inputVal = document.getElementById("inputId").value;
        // Displaying the value
        alert(inputVal);
      }
    </script>
  </body>
</html>

Try it Yourself »

tip
Always check if the element exists before accessing .value to prevent TypeError: Cannot read properties of null. You can use optional chaining: document.getElementById("inputId")?.value.

You can also use the document.getElementsByClassName('className')[0].value method which also returns a Live HTMLCollection. HTMLCollection is a set of HTML elements:

JavaScript: document.getElementsByClassName()

javascript

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

JavaScript: document.getElementsByClassName()

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
  </head>
  <body>
    <input type="text" placeholder="Type " id="inputId" class="inputClass" />
    <button type="button" onclick="getInputValue();">Get Value</button>
    <script>
      function getInputValue() {
        // Selecting the input element and get its value 
        let inputVal = document.getElementsByClassName("inputClass")[0].value;
        // Displaying the value
        alert(inputVal);
      }
    </script>
  </body>
</html>

Try it Yourself »

Or you can use document.getElementsByTagName('tagName')[0].value which also returns a Live HTMLCollection:

JavaScript: document.getElementsByTagName()

javascript

document.getElementsByTagName("input")[0].value;

INFO

Live HTMLCollection only includes the matching elements (e.g. class name or tag name) and does not include text nodes.

Another method is document.getElementsByName('name')[0].value which returns a live NodeList, a collection of nodes. It returns a live NodeList of elements matching the specified name attribute:

JavaScript: document.getElementsByName()

javascript

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

Use the powerful document.querySelector('selector').value which uses a CSS selector to select the element:

JavaScript: document.querySelector()

javascript

document.querySelector('#searchText').value; // selected by id 
document.querySelector('.search_Field').value; // selected by class 
document.querySelector('input').value; // selected by tagname 
document.querySelector('[name="searchText"]').value; // selected by name

There is another method document.querySelectorAll('selector')[0].value which is the same as the preceding method, but returns all matching elements as a static NodeList:

JavaScript: document.querySelectorAll()

javascript

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

Nodelist and HTMLCollection

The HTMLCollection represents a generic collection of elements in document order, suggesting methods and properties to select from the list. The HTMLCollection in the HTML DOM is live, meaning it will be automatically updated when the document changes. NodeList objects are collections of nodes returned by properties such as Node. There are two types of NodeList: live and static. A static NodeList remains unchanged when the DOM is modified, while a live NodeList updates automatically when the DOM changes. You can loop over the items in a NodeList using a for loop. Using for...in or for each...in is not recommended.

How to Get the Value of Text Input Field Using JavaScript ​

Nodelist and HTMLCollection ​

How to Get the Value of Text Input Field Using JavaScript

Nodelist and HTMLCollection