HTML | DOM Legend form Property

Get the Value of Text Input Field using JavaScript

Last Updated : 09 Jan, 2025

Getting the value of a text input field using JavaScript refers to accessing the current content entered by a user in an input element, such as <input> or <textarea>, by utilizing the value property. This allows for dynamic interaction and data manipulation in web forms.

Syntax

inputField.value;
inputField.value = text;

Getting the Value of a Text Input Field

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.

Example: Here, we are using the Value property to get the value of the text input field.

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.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using Value Property</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

Getting the Value of a Textarea

Example : Here, we are getting the text area value using value property.

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.

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

HTML | DOM Legend form Property

A

ashishsaini3

Improve

Article Tags :

Similar Reads

Set the Value of an Input Field in JavaScript

We will learn how you can set the value of an input field in JavaScript. We will set user input to the placeholder value of the input field using JavaScript. Below are the approaches to set the value of an input field in JavaScript:Table of Content By using the innerHTML propertyBy using setAttribut

How to get the text of option tag by value using JavaScript ?

To get the text of the option tag by value using JavaScript, we have multiple approaches. we are going to learn how to get the text of the option tag by value using JavaScript. These are the following approaches that are discussed below: Table of Content Using value PropertyUsing Object.values() Met

How to Get the Value of an Input Text Box using jQuery?

When working with forms or interactive web pages, sometimes need to get the values entered into the input fields. This article provide a complete guide on how to get the value o an input text box using jQuery. Below are the different approaches to get the value of an input text box using jQuery: Get

JQuery Set the Value of an Input Text Field

Set the value of an input text field in jQuery is useful while working with forms. It is used to add new value to the input text field. In jQuery, there are various methods to set the value of input text fields, these are - val(), prop(), and attr(). These method offers unique capabilities for setti

How to Get Selected Value in Dropdown List using JavaScript?

A dropdown list is an HTML element that allows users to select one option from a list of options. The <select> and <option> tags are used to create dropdown lists in HTML. In this article, we will see how to get selected value from dropdown list using JavaScript. Basic HTML Structure for

How to get Values from HTML Input Array using JavaScript?

This problem can be solved by using input tags having the same "name" attribute value that can group multiple values stored under one name which could later be accessed by using that name. Syntax let input = document.getElementsByName('array[]');What is an Input Array in HTML?An "input array" in HTM

How to Get Value by Class Name using JavaScript ?

This article will show you how to use JavaScript to get value by class name. To get the value of an element by its class name in JavaScript, you can use the getElementsByClassName() method. This method returns an array-like object of all elements with the specified class name. You can then access th

How to get value of selected radio button using JavaScript ?

To get the value of the selected radio button, a user-defined function can be created that gets all the radio buttons with the name attribute and finds the radio button selected using the checked property. The checked property returns True if the radio button is selected and False otherwise. If ther

JavaScript Know the value of GET parameters from URL

In this article, we will see how to get the GET parameters from a URL using JavaScript. In order to know the parameters that are passed by the "GET" method, sometimes we need to pass the Email and other details. For that purpose, we are using the following snippet of code. Example 1: This example ge

Create OTP Input Field using HTML CSS and JavaScript

We will build an OTP (One-Time Password) input box, which is commonly used on many websites. This interactive and engaging UI element allows users to enter their OTP conveniently and efficiently. We will walk through the step-by-step process of creating this functionality using HTML, CSS, and JavaSc