To get the value of a text input field using JavaScript, you can use the DOM Input Text value Property of the input element.
Syntax for getting the value of text
inputField.value;
Syntax for setting the value of text
inputField.value = text;
Using Value Property to get value:
The value property in JavaScript represents the current value of an input element, such as <input>, <textarea>, or <select>. It allows you to access and manipulate the text, number, or selected option within the input element.
Using Value Property to get value Example:
Here, we are using the Value property to get the value of the text input field.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Value Example</title>
</head>
<body>
<!-- Input field -->
<input type="text" id="myInput" placeholder="Enter text">
<!-- Button to get input value -->
<button onclick="getValue()">Get Value</button>
<!-- Script to get input value -->
<script>
function getValue() {
// Get the input element by its ID
let inputField = document.getElementById("myInput");
// Get the value of the input field
let value = inputField.value;
// Display the value in an alert
alert("Input value: " + value);
}
</script>
</body>
</html>
|
Output:
Explanation:
Here,
-
An
<input>element with the ID"myInput"is defined. -
A button with an
onclickevent handler is provided to trigger thegetValue()function. -
The
getValue()function retrieves the input element usinggetElementById(), accesses itsvalueproperty to get the text entered by the user, and displays it in an alert.
Using Value Property to get value Example:
Here, we are getting the text area value using value property.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea Value Example</title>
</head>
<body>
<!-- Textarea -->
<textarea id="myTextarea" rows="4" cols="50" placeholder="Enter text"></textarea>
<!-- Button to get textarea value -->
<button onclick="getValue()">Get Value</button>
<!-- Script to get textarea value -->
<script>
function getValue() {
// Get the textarea element by its ID
let textarea = document.getElementById("myTextarea");
// Get the value of the textarea
let value = textarea.value;
// Display the value in an alert
alert("Textarea value: " + value);
}
</script>
</body>
</html>
|
Output:
Explanation:
Here,
-
A
<textarea>element with the ID"myTextarea"is defined. -
A button with an
onclickevent handler is provided to trigger thegetValue()function. -
The
getValue()function retrieves the<textarea>element usinggetElementById(), accesses itsvalueproperty to get the text entered by the user, and displays it in an alert.
Getting the value of text area field – UseCases:
1. Set the value of an input field in JavaScript
These are the following methods by using we can Set the value of an input field in JavaScript:
2. How to get the value in an input text box using jQuery ?
Below are the different approaches listed to get the value of an input text box using jQuery:
3. jQuery Set the value of an input text field
There are some in-built methods available in jQuery that we can use for this purpose as listed below: