Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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

  • Last Updated : 03 Aug, 2021

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

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

$(selector).val(function(index, currentvalue))

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.




<!DOCTYPE html>
<html lang="en">
  
<head>
    <script src=
    </script>
  
    <script>
        $(document).ready(function () {
  
            // On button click, get value
            // of input control Show alert
            // message box
            $("#getValBtnID").click(function () {
                var inputString = $("#userInputID").val();
                alert(inputString);
            });
        });
    </script>
</head>
  
<body>
    <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:



Example 2: This implementation shows the set value property when the button is clicked. It automatically calls and fills the text box with the predefined data mentioned in the code.




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
  
    <script>
        $(document).ready(function () {
            $("#setBtnID").click(function () {
                $("input:text").val("Hello World!");
            });
        });
    </script>
</head>
  
<body>
    <h2 style="color:green">
        GeeksForGeeks
    </h2>
      
    <b>JQuery val() Method</b>
  
    <p>User Text: <input type="text"
        name="userInput">
    </p>
  
    <button id="setBtnID">
        Set the value of the 
        input field
    </button>
</body>
  
</html>

Output:

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :