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:
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 Property | querySelector() Method |
|---|---|---|
| Method of Selection | Requires direct reference to the input element (e.g., by ID) | Allows flexible element selection using CSS-like selectors |
| Complexity | Simple and straightforward | Provides more flexibility |
| Multiple Element Selection | Suitable for accessing the value of a single input element | Allows selection of multiple elements |
| Compatibility | Widely supported by all modern browsers | Supported 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