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 <kbd class="highlighted">document.getElementById('textboxId').value</kbd> to get the value of the box:

JavaScript: document.getElementById()

document.getElementById("inputId").value;

JavaScript: document.getElementById()

<!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 <kbd class="highlighted">document.getElementsByClassName('className')[0].value</kbd> method which also returns a Live HTMLCollection. HTMLCollection is a set of HTML elements:

JavaScript: document.getElementsByClassName()

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

JavaScript: document.getElementsByClassName()

<!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 <kbd class="highlighted">document.getElementsByTagName('tagName')[0].value</kbd> which also returns a Live HTMLCollection:

JavaScript: document.getElementsByTagName()

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 <kbd class="highlighted">document.getElementsByName('name')[0].value</kbd> which returns a live NodeList, a collection of nodes. It returns a live NodeList of elements matching the specified name attribute:

JavaScript: document.getElementsByName()

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

Use the powerful <kbd class="highlighted">document.querySelector('selector').value</kbd> which uses a CSS selector to select the element:

JavaScript: document.querySelector()

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 <kbd class="highlighted">document.querySelectorAll('selector')[0].value</kbd> which is the same as the preceding method, but returns all matching elements as a static NodeList:

JavaScript: document.querySelectorAll()

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.