Get Input Textbox Value and Textarea Value with Jquery

In this tutorial, learn how to get input textbox value on button click using jQuery. You can also find the value of textarea and print in the output. The short answer is to use the jQuery selector with val().

After you store the value in a jQuery variable. You can print the value of the input box in the output using jQuery html().

A jQuery click event can be used to perform this task. when you click the button, you will get the entered value of the input box in the output. The same rule will also be applied to the textarea element of HTML.

Live Demo: Get Inputbox and Textarea Value Using jQuery

You can use the submit button and reset button as given in the below image. When you fill the text boxes and click the left button, you will get the filled value. However, if you click the reset button, it makes textboxes empty.

Get Input Textbox Value and Textarea Value with Jquery

If you want to learn the uses of the HTML, CSS and jQuery code to create the above demo. You have to read our tutorial given below in detail.

So, let’s start with the input box element of HTML to get entered value.

How to Get Input Textbox Value Using jQuery

You can find the entered value in the given input box using jQuery val(). The function requires the class of the input box as jQuery selector. After selecting the input box using jQuery, you can get the value of the input box.

Test it Live

Output



Your Entered Content is:

The above example showing the input box with the button. You have to just enter any text in the textbox and click the ‘Get Input Content‘ button. The entered text content prints out in the output.

Get Textarea Value with jQuery

Textarea is the input text field where you can enter multiple line text. However, to get the value of the textarea or entered content. You have to use the jQuery val() function as given in the example below.

You can use the same method as you have used with the above input box.

Output




Your Entered Content is:

The above example contains the textarea and the button. Please enter any single or multiline content in the given textarea. After you enter content, you have to just click the button to get print the content.

If you want to print the multiline content, you have to use the HTML <br/> tag.

Hope, you like this post of how to get the input textbox value and textarea value jQuery. If you have any query regarding the tutorial, please comment below.

You may also like to read

Also tell me, which method you are using to find the value of the input box.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Download Link Will be Send to Your Email id