Open In App

Get the value of text input field using JavaScript

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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.

HTML




<!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:

valueeee

Explanation:

Here,

  • An <input> element with the ID "myInput" is defined.
  • A button with an onclick event handler is provided to trigger the getValue() function.
  • The getValue() function retrieves the input element using getElementById(), accesses its value property 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.

HTML




<!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:

valueeee2

Explanation:

Here,

  • A <textarea> element with the ID "myTextarea" is defined.
  • A button with an onclick event handler is provided to trigger the getValue() function.
  • The getValue() function retrieves the <textarea> element using getElementById(), accesses its value property 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:



Last Updated : 28 Feb, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads