How to Get the Value of Text Input in JavaScript

Web developers! Are you ready to level up your JavaScript game?

If the answer is a resounding YES, then let’s talk about a fundamental skill that everyone should have in their arsenal: getting the value of a text input field with JavaScript.

Maybe you need this for validating the user’s inputs. Or maybe there’s some a business requirement that requires you to work with that value in real time. Whatever the case, by the end of this tutorial, you’ll be able to retrieve the text that a user enters into an input field and use it like a boss. Now let’s get into it!

Getting the Value of a Text Input Field

Suppose we have the following input field somewhere in the HTML document:

<input type="text" id="myInputField">

To retrieve the value of this input field, we need to find the input field within the DOM and reference its value property:

document.getElementById("myInputField").value;

In the above example, we’re using the document.getElementById() method to find the field. However, we can just as well use the document.querySelector(), which lets us use a CSS selector for the lookup:

document.querySelector("#myInputField").value;

And that’s it!

We now have the value of the input field, which we can use however we want in our website or web application’s logic.

Getting the Values of Multiple Input Fields

Suppose we have multiple <input> fields within a <form> element:

<form id="myForm">
  <input type="text" id="inputField1">
  <input type="text" id="inputField2">
  <input type="text" id="inputField3">
  <button onclick="getInputValues()">Submit</button>
</form>

Or, to put it into words, we have three input fields with IDs of inputField1, inputField2, and inputField3, and a submit button that calls a JavaScript function called getInputValues().

To deliver on a business requirement, we need to get all of their values and store them in a variable. We can do this by looping through all the input fields when the user clicks on the submission button, then pushing their values into an array.

Here’s the JavaScript code for the getInputValues() function:

function getInputValues() {
  // Find input fields, store them in a constant
  const inputFields = document.querySelectorAll("#myForm input[type='text']");
  // Create empty inputValues array
  const inputValues = [];
  // Loop through input fields
  for (let i = 0; i < inputFields.length; i++) {
    // Push values of each input field into an array
    inputValues.push(inputFields[i].value);
  }
  // Log array in the console
  console.log(inputValues);
}

With this code, you can easily get the values of multiple input fields within a form and store them in an array. You can then use this array however you like in your web application.