Open In App

How to get value of textbox in jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

The purpose of this article is to demonstrate how we can get the value of textbox using jQuery. A basic understanding of HTML, CSS, and jQuery is required. This can be done by using the jQuery val() method.  

val() Method: This method is used to set or return the value of the attribute for the selected elements.

 Syntax: Method to get the value of the textbox

$().val()

Approach:

  • Create a file index.html in your local system.
  • Create an input filed (type text) inside your HTML body.
  • To get the value of the input text you need to attach val() method to that particular selected input element.

Example: In this example, we are going to see the use of the input val() method. We take an input filed (type text) and attach an input event listener to it. When the user types any letter or word in the text box it will immediately show the text at the bottom of the input field.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
  
    <script type="text/javascript">
        $(document).ready(function () {
            $('.textbox').on('input', function () {
  
                // Set the inner text of the
                // of the span tag
                $('span').text($('.textbox').val());
            });
        });
    </script>
  
    <style>
        .container {
            display: flex;
            justify-content: center;
        }
  
        h1 {
            color: green;
        }
  
        span {
            margin-top: 10px;
        }
    </style>
</head>
  
<body>
    <h1 class="container">
        GeeksforGeeks
    </h1>
  
    <div class="container">
        <input class="textbox" 
            type="text" placeholder="Text" />
    </div>
  
    <span class="container"></span>
</body>
  
</html>


Output:              



Last Updated : 13 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads