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

Last Updated : 08 Oct, 2024

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 the Value of an Input Text Box using 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. To get the value of an input text box, you can simply call this method on the element.

Syntax

$('selector').val()

Example: This example explains the steps to get the value of an input text box using jQuery.

html

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

<head>
    <script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
    </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

Get the Value of an Input Text Box using prop() Method

The prop() method can also be used to get the entered value of text box. Pass the property name as a parameter of 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.

Syntax

$('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=
"https://code.jquery.com/jquery-3.4.1.min.js">
    </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.