Skip to content
Related Articles

Related Articles

How to get the value in an input text box using jQuery ?
  • Last Updated : 10 Jul, 2020

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:

$(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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :