Last Updated on August 4, 2022 by Roshan Parihar
In this tutorial, learn how to get input textbox value and textarea value on button click using jQuery. The short answer is to use the jQuery selector with val() function to get value.
You can use the click event of jQuery to find the values of input box and textarea. After you get the value, you can display it using the html() function of jQuery.
Let’s learn the methods with examples given below.
How to Get Input Textbox Value Using jQuery
You can get input value using jQuery val() function that required no argument to find the value. Firstly, you have to select the input box using a jQuery selector. After selecting the input box, you have to use the val() function to get the input box value as given below.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(document).ready(function(){ $("button").click(function(){ var mytxtcontent = $("input").val(); $("span.result").html(mytxtcontent); }); }); </script> <input type="text" placeholder="Enter Your Text" class="txt-myinput"/> <button type="button" class="btn-gettxt">Get Input Value</button><br><br> <strong>Your Entered Content is: </strong><span class="result"></span> |
Output
Your Entered Content is:
The above example shows the input box with the button. You can enter any text in the textbox and click the button to get the input box value. After you click the button, you will get the entered text content prints out in the output using html() function.
How to Find Textarea Value Using jQuery
In addition to the above example, you can also get textarea value using the val() function of jQuery. The method is the same as given above and you have to use jQuery to select the element. After that, use the val() function to get the user entered content in the textarea.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(document).ready(function(){ $("button").click(function(){ var mytxtcontent = $("textarea").val(); $("span").html(mytxtcontent); }); }); </script> <textarea placeholder="Enter Your Text" rows="4"></textarea><br/> <button type="button">Get Textarea Content</button> <strong>Your Entered Content is: </strong><span></span> |
Output
Your Entered Content is:
The above example contains the textarea and the button. You can enter a single or multiline line of content in the given textarea. After that, click the button to get the content in the output.
I hope you like this post on how to get the input textbox value and textarea value using jQuery.
You may also like to read