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 are 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 the differences.

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

Watch a course JavaScript -The Complete Guide (Beginner + Advanced) 

document.getElementById("inputId").value;
<!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>

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

document.getElementsByClassName("inputClass")[0].value;
<!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>

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

document.getElementsByTagName("input")[0].value;
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')[wholeNumber].value which returns a live NodeList which is a collection of nodes. It includes any HTM/XML element, and text content of a element:

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

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

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')[wholeNumber].value which is the same as the preceding method, but returns all elements with that selector as a static Nodelist:

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 when the document is changed it will be automatically updated. NodeList objects are collections of nodes returned by properties such as Node. There are two types of NodeList: live and static. It is static when any change in the DOM does not affect the content of the collection. And live when the changes in the DOM automatically update the collection. You can loop over the items in a NodeList using a for loop. Using for...in or for each...in is not recommended.