{"id":834,"date":"2012-06-07T13:35:42","date_gmt":"2012-06-07T13:35:42","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=834"},"modified":"2012-06-07T13:35:42","modified_gmt":"2012-06-07T13:35:42","slug":"jquery-textarea-value-get-textarea-value-with-jquery-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-textarea-value-get-textarea-value-with-jquery-examples\/","title":{"rendered":"jQuery Textarea Value Examples"},"content":{"rendered":"

Have you wondered how to get textarea value using jQuery<\/strong><\/em>? In jQuery, textarea value can be easily obtained by using just single line of code. Read on to find out more.<\/p>\n

How to use jQuery to Get Textarea Value<\/h2>\n

Let’s assume that you have a textarea with ID “comments”. You can how get it’s value using jQuery in the following ways:<\/p>\n

HTML source:<\/strong><\/p>\n

<textarea name=\"comments\" id=\"comments\"><\/textarea><\/pre>\n
Example 1: Get Textarea value using val()<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\nvar value = $(\"#comments\").val();\n\nalert(value);\n\n});\n\n<\/script><\/pre>\n
When you execute the above code, you will see a JavaScript alert but that will be blank because when the page loads, the textarea does not have any content in it. To assign some value to the textarea and get it’s value when the page loads, try the HTML source below and execute the code:<\/p>\n
HTML Source:<\/strong><\/p>\n
<textarea name=\"comments\" id=\"comments\">Some content<\/textarea><\/pre>\n
You will now see that the JavaScript alert says: Some content<\/p>\n
So that’s how you can get textarea value on document load.<\/p>\n
Example 2: Get Textarea value when it’s value is changed using change()<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"#comments\").change(function(){\n\nvar value = $(this).val();\n\nalert(value);\n\n});\n\n});\n\n<\/script><\/pre>\n
What the above jQuery does is that it alerts the value of the textarea when it is changed. So once you enter something in the textarea, click outside of the textarea so that it loses focus. You will now see the javascript alert with the content you entered in it.<\/p>\n
Example 3: Get Textarea value using it’s name attribute<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"textarea[name='comments']\").change(function(){\n\nvar value = $(this).val();\n\nalert(value);\n\n});\n\n});\n\n<\/script><\/pre>\n
If you have noticed, I am targeting the textarea by using it’s name in the above code. That’s how you can get textarea value using name in jQuery.<\/p>\n
Example 4: Get Textarea value using it’s Class<\/h3>\n
HTML Source:<\/strong><\/p>\n
<input name=\"comments\" type=\"text\" id=\"comments\" class=\"comments_class\" \/><\/pre>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\".comments_class\").change(function(){\n\nvar value = $(this).val();\n\nalert(value);\n\n});\n\n});\n\n<\/script><\/pre>\n
In the above code, the textarea is targeted using the “comments_class” applied to the textarea. So now whenever the content of the “comments” textarea is changed, its value will be shown in alert.<\/p>\n
Example 5: Get Textarea value using blur()<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$(\"#comments\").blur(function(){\n\nvar value = $(this).val();\n\nalert(value);\n\n});\n\n});\n\n<\/script><\/pre>\n
What the above jQuery does is that it alerts the value of the textarea when it is changed. So once you enter something in the textarea, click outside of the textarea so that it loses focus. You will now see the javascript alert with the content you entered in it. This works same as the change() method in this context.<\/p>\n
Simple, isn’t it?<\/h5>\n
Do you know of any other ways to get textarea value using jQuery<\/strong><\/em>? Feel free to share below.<\/p>\n","protected":false},"excerpt":{"rendered":"
Have you wondered how to get textarea value using jQuery? In jQuery, textarea value can be easily obtained by using just single line of code. Read on to find out more.<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[41],"class_list":["post-834","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-ds","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=834"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/834\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}