Open In App

How to get the value in an input text box using jQuery ?

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

In this article, we will learn about the different methods to access the value of the input text box entered by the user using jQuery. Below are the different approaches listed to get the value of an input text box using jQuery:

Let us now discuss all the above-listed methods in detail with the help of code examples.

Using the val() method

jQuery val() method is used to get the value of an input text box. This function is used to set or return the value. Return value gives the value attribute of the first element. In the case of the set value, it sets the value of the attribute for all elements. This element is mostly used with HTML forms.

Syntax:

$('element_selector').val()

Example 1: This example is implemented where a text is written in the field and when the show value button is clicked a popover comes up and shows the entered text.

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <script src=
    </script>
 
    <script>
        $(document).ready(function () {
 
            // On button click, get value
            // of input control
            $("#getValBtnID").click(function () {
                const inputString = $("#userInputID").val();
                alert(inputString);
            });
        });
    </script>
</head>
 
<body style="text-align: center">
    <h3 style="color:green">
        GeeksForGeeks
    </h3>
 
    <b>JQuery val() Method</b>
     
    <br><br>
     
    <input type="text" id="userInputID">
    <br><br>
 
    <button type="button" id="getValBtnID">
        Get Value
    </button>
     
</body>
 
</html>


Output:

propGetter

Using the prop() method

The prop() method can also be used to get the entered value inside the text box by passing the property name as a parameter in the form of the string to the prop() method and get the value of the passed property. In case of input text box, we will pass the value property as parameter to the prop() method to get value of it.

Syntax:

$('element_selector').prop('value');

Example: The below example will explain the use of the prop() method to get the value of the input text box:

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <script src=
    </script>
 
    <script>
        $(document).ready(function () {
            // On button click, get value
            // of input control
            $("#getValBtnID").click(function () {
                const inputString = $("#userInputID").prop('value');
                alert(inputString);
            });
        });
    </script>
</head>
 
<body style="text-align: center;">
    <h3 style="color:green">
        GeeksForGeeks
    </h3>
 
    <b>JQuery val() Method</b>
     
    <br><br>
     
    <input type="text" value="" id="userInputID">
    <br><br>
 
    <button type="button" id="getValBtnID">
        Get Value
    </button>
</body>
 
</html>


Output:

propGetter

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for its philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



Last Updated : 14 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads