{"id":816,"date":"2012-06-07T05:05:26","date_gmt":"2012-06-07T05:05:26","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=816"},"modified":"2012-06-07T05:05:26","modified_gmt":"2012-06-07T05:05:26","slug":"jquery-get-textarea-id-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-get-textarea-id-examples\/","title":{"rendered":"jQuery Get Textarea ID Examples"},"content":{"rendered":"

Did you ever feel the need to use jquery to Get Textarea ID<\/strong>? In this article, I am going to share with you a very simple way to get textarea ID using jQuery<\/strong>. Actual code is just 1 line, so it’s super easy to follow and implement.<\/p>\n

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

Let’s assume that you have 3 textareas with ID “comments”, “skills” & “description”. The HTML code for the textareaes would be:<\/p>\n

<textarea name=\"comments\" id=\"comments\"><\/textarea>\n\n<textarea name=\"skills\" id=\"skills\"><\/textarea>\n\n<textarea name=\"description\" id=\"description\"><\/textarea><\/pre>\n
Now you want to get the ID of the textarea whose value has been changed. You can do it in the following manner:<\/p>\n
Example 1: Get Textarea ID on change<\/h3>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$('input[type=\"textarea\"]').change(function(){\nvar id = $(this).attr('id');\nalert(id);\n});\n\n});\n\n<\/script><\/pre>\n
When you run the above example, you will see the 3 input textareas. Simply enter anything in any of these textareas and click outside it so that the textarea loses focus. As soon as you do that, you will see the JavaScript alert that shows you the ID of the textarea in which you just made the change.<\/p>\n
Example 2 –\u00a0Get Textarea ID using name attribute<\/h3>\n
Let’s take the above example as the basis for this example. Let’s assume that you have only the name of the textarea and now you want to get the textarea ID using just the name. For illustration purposes, let’s assume that you want to get the ID of the “description” textarea using just it’s name. You can do it as below:<\/p>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\nvar id = ( $('input[name=\"description\"]').attr('id') );\n\nalert(id);\n\n});\n\n<\/script><\/pre>\n
In the above example, when you run the page, you will receive a JavaScript alert box that gives you the ID of the “description” textarea. Note that we are using the “name” attribute of the “description” textarea in order to get it’s ID.<\/p>\n
Example 3 –\u00a0Get Textarea ID using class<\/h3>\n
Let’s assume that you have applied a class of “my_textarea” to all the textareas. You can now find out the ID of the textarea whose value has been changed using the class like so:<\/p>\n
<script type=\"text\/javascript\">\n\n$(document).ready(function() {\n\n$('.my_textarea').change(function(){\nvar id = $(this).attr('id');\nalert(id);\n});\n\n});\n\n<\/script><\/pre>\n
When you run the above example, you will see the 3 input textareas. Simply enter anything in any of them and click outside the textarea so that it loses focus. As soon as you do that, you will see the JavaScript alert that shows you the ID of the textarea in which you just made the change.<\/p>\n
That’s it!<\/strong><\/p>\n
Do you know of any other ways to get textarea ID using jQuery<\/strong>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"
Did you ever feel the need to use jquery to Get Textarea ID? In this article, I am going to share with you a very simple way to get textarea ID using jQuery. Actual code is just 1 line, so it’s super easy to follow and implement.<\/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-816","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-da","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/816","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=816"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/816\/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=816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}