Skip to content

How to get value of input field in JavaScript

  • by

There are two ways to get the value of an input field in JavaScript: using the value property or the querySelector() method.

The value property is a property of the DOM input element that contains the value of the input field. To get the value of an input field using the value property, you can use the following JavaScript code:

const inputField = document.getElementById("myInputField");
const value = inputField.value;

To get the value of an input field in JavaScript, you can use the following steps:

1. Identify the input field in your HTML code and assign it a unique id attribute. For example:

<input type="text" id="myInput" />

2. In your JavaScript code, access the input field using the getElementById() function, passing the id of the input field as the argument. Store the reference to the input field in a variable.

var input = document.getElementById("myInput");

3. Once you have the reference to the input field, you can retrieve its value using the value property.

var value = input.value;

Now, the variable value contains the current value of the input field, which you can use as needed in your JavaScript code.

The querySelector() method is a method of the document object that can be used to select a single element from the DOM based on its ID, class, or tag name. To get the value of an input field using the querySelector() method, you can use the following JavaScript code:

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

Get the value of the input field in the JavaScript example

Simple example code.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Get Input Field Value</title>
</head>
<body>
  <input type="text" id="myInput" />

  <button onclick="getValue()">Get Value</button>

  <script>
    function getValue() {
      var input = document.getElementById("myInput");
      var value = input.value;
      alert("The value of the input field is: " + value);
    }
  </script>
</body>
</html>

Output:

How to get value of input field in JavaScript

Using the querySelector() method:

This method allows you to select an element using CSS-like selectors.

function displayValue() {
  const value = document.querySelector("#myInputField").value;
  document.getElementById("output").innerHTML = value;
}

The main differences between the two methods, focusing on the method of selection, complexity, multiple element selection, and compatibility.

#value PropertyquerySelector() Method
Method of SelectionRequires direct reference to the input element (e.g., by ID)Allows flexible element selection using CSS-like selectors
ComplexitySimple and straightforwardProvides more flexibility
Multiple Element SelectionSuitable for accessing the value of a single input elementAllows selection of multiple elements
CompatibilityWidely supported by all modern browsersSupported by modern browsers, limited support in older browsers

Do comment if you have any doubts or suggestions on this JS input topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *