{"id":2057,"date":"2013-01-23T08:20:00","date_gmt":"2013-01-23T08:20:00","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=2057"},"modified":"2013-01-23T08:20:00","modified_gmt":"2013-01-23T08:20:00","slug":"jquery-get-label-get-label-text-using-jquery-examples-jquery-label","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-get-label-get-label-text-using-jquery-examples-jquery-label\/","title":{"rendered":"jQuery Get Label Text Examples"},"content":{"rendered":"<p>HTML Label forms an easy &amp; important part when dealing with the\u00a0different\u00a0form elements as it allows us to define labels for them. The HTML Labels add to the usability as it toggles the associated control when the label is clicked upon. So far so good. But what if you needed to <strong>get the label text of an input element such as Textbox, Textarea, Checkbox, Select Dropdown, Div<\/strong>,or any other element? In this article, I am going to share with you easy ways to\u00a0use<strong> <\/strong><em><strong>jQuery to get label text of input elements &amp; page elements<\/strong><\/em>\u00a0with easy to follow examples. So read on to find out more.<!--more--><\/p>\n<h2>How to use jQuery to\u00a0Get Label Text<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=2057\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>Now lets us look at how to <em><strong>get label of different form elements such as textbox, textarea, select dropdown menu, div, list item, etc.<\/strong><\/em> by means of examples. I am assuming that we have different input elements on the page with their respective names &amp; IDs. So here is how you can get label text using jQuery:<\/p>\n<h3>Example #1:\u00a0Using jQuery .text(); method to get the Label Text of Input Textbox<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 1\">&lt;label for=\"first_name\"&gt;First Name&lt;\/label&gt;\n&lt;input type=\"text\" name=\"first_name\" id=\"first_name\"&gt;\n&lt;br&gt;\n&lt;input type=\"submit\" name=\"sbt_get_textbox_text\" id=\"sbt_get_textbox_text\" value=\"Get Input Textbox Label Text\"&gt;\n\n\t\/\/Get\/Alert Input textbox label text when button is clicked\t\n\t$('#sbt_get_textbox_text').on(\"click\", function(){\n\n\t\talert( $('label[for=first_name]').text() );  \n\n\t\treturn false;\t\n\n\t});<\/pre>\n<h3>Example #2:\u00a0Using jQuery .text(); method to get the Label Text of Input Textarea<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 2\">&lt;label for=\"message\"&gt;Leave a message:&lt;\/label&gt;\n&lt;br&gt;\n&lt;textarea name=\"message\" id=\"message\" cols=\"45\" rows=\"5\"&gt;&lt;\/textarea&gt;\n\n&lt;br&gt;\n&lt;input type=\"submit\" name=\"sbt_get_textarea_text\" id=\"sbt_get_textarea_text\" value=\"Get Input Textarea Label Text\"&gt;\n\n\t\/\/Get\/Alert Input textarea label text when button is clicked\t\n\t$('#sbt_get_textarea_text').on(\"click\", function(){\n\n\t\talert( $('label[for=message]').text() );  \t\t\n\n\t\treturn false;\t\n\n\t});<\/pre>\n<h3>\u00a0Example #3:\u00a0Using jQuery .text(); method to get the Label Text of Select Dropdown Menu<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 3\">&lt;label for=\"states\"&gt;Pick a State&lt;\/label&gt;\n&lt;select name=\"states\" id=\"states\"&gt;\n  &lt;option value=\"Texas\" selected=\"selected\"&gt;Texas&lt;\/option&gt;\n  &lt;option value=\"Illinois\"&gt;Illinois&lt;\/option&gt;\n  &lt;option value=\"Alabama\"&gt;Alabama&lt;\/option&gt;\n&lt;\/select&gt;\n&lt;br&gt;\n&lt;input type=\"submit\" name=\"sbt_get_dropdown_text\" id=\"sbt_get_dropdown_text\" value=\"Get Select Dropdown Label Text\"&gt;\n\n\t\/\/Get\/Alert Select Dropdown label text when button is clicked\t\n\t$('#sbt_get_dropdown_text').on(\"click\", function(){\n\n\t\talert( $('label[for=states]').text() );  \t\t\n\n\t\treturn false;\t\n\n\t});<\/pre>\n<h3>Example #4:\u00a0Using jQuery .text(); method to get the Label Text of Input Checkbox<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 4\">&lt;p&gt;\n    &lt;label&gt;\n      &lt;input type=\"checkbox\" name=\"fruits\" value=\"apple\" id=\"fruits_0\"&gt;\n      Apple&lt;\/label&gt;\n    &lt;br&gt;\n    &lt;label&gt;\n      &lt;input type=\"checkbox\" name=\"fruits\" value=\"mango\" id=\"fruits_1\"&gt;\n      Mango&lt;\/label&gt;\n    &lt;br&gt;\n    &lt;label&gt;\n      &lt;input type=\"checkbox\" name=\"fruits\" value=\"grapes\" id=\"fruits_2\"&gt;\n      Grapes&lt;\/label&gt;\n    &lt;br&gt;\n&lt;input type=\"submit\" name=\"sbt_get_checkbox_text\" id=\"sbt_get_checkbox_text\" value=\"Get Selected Checkbox Label Text\"&gt;\n&lt;\/p&gt;\n\n\t\/\/Get\/Alert checked checkboxes text when button is clicked\n\t$('#sbt_get_checkbox_text').on(\"click\", function(){\t\n\n\t\t$('input[name=\"fruits\"]:checked').each(function(index) {\n\t\t\talert( $(this).closest('label').text() );\n\t\t});\n\n\t\treturn false;\t\n\n\t});<\/pre>\n<h3>Example #5:\u00a0Using jQuery .text(); method to get the Label Text of Input Radiobutton<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 5\">&lt;p&gt;\n  &lt;label&gt;\n    &lt;input type=\"radio\" name=\"subscribe\" value=\"Yes\" id=\"subscribe_0\"&gt;\n    Yes&lt;\/label&gt;\n  &lt;br&gt;\n  &lt;label&gt;\n    &lt;input type=\"radio\" name=\"subscribe\" value=\"No\" id=\"subscribe_1\"&gt;\n    No&lt;\/label&gt;\n  &lt;br&gt;\n  &lt;input type=\"submit\" name=\"sbt_get_radiobutton_text\" id=\"sbt_get_radiobutton_text\" value=\"Get Selected Radibutton Label Text\"&gt;\n&lt;\/p&gt;\n\n\t\/\/Get\/Alert checked checkboxes text when button is clicked\n\t$('#sbt_get_radiobutton_text').on(\"click\", function(){\t\n\n\t\t$('input[name=\"subscribe\"]:checked').each(function(index) {\n\t\t\talert( $(this).closest('label').text() );\n\t\t});\n\n\t\treturn false;\t\n\n\t});<\/pre>\n<h3>Example #6:\u00a0Using jQuery .text(); method to get the Label Text of Input File Upload<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 6\">&lt;label for=\"attachment\"&gt;Select a file  &lt;\/label&gt;\n&lt;input type=\"file\" name=\"attachment\" id=\"attachment\"&gt;\n\n&lt;br&gt;\n&lt;input type=\"submit\" name=\"sbt_get_file_upload_text\" id=\"sbt_get_file_upload_text\" value=\"Get File Upload Label Text\"&gt;\n\n\t\/\/Get\/Alert File Upload label text when button is clicked\t\n\t$('#sbt_get_file_upload_text').on(\"click\", function(){\n\n\t\talert( $('label[for=attachment]').text() );  \t\t\n\n\t\treturn false;\t\n\n\t});<\/pre>\n<h3>Example #7:\u00a0Using jQuery .text(); method to get the Label Text of Input Button<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 7\">&lt;input type=\"submit\" name=\"test_button\" id=\"test_button\" value=\"This is Test Button\"&gt;\n\n&lt;br&gt;\n&lt;input type=\"submit\" name=\"sbt_get_button_text\" id=\"sbt_get_button_text\" value=\"Get Button Label Text\"&gt;\n\n\t\/\/Get\/Alert Button text when button is clicked\n\t$('#sbt_get_button_text').on(\"click\", function(){\n\n\t\talert($('#test_button').attr(\"value\"));\t\t\t\t\n\n\t\treturn false;\t\n\n\t});<\/pre>\n<h3>Example #8:\u00a0Using jQuery .text(); method to get the Label Text of Fieldset Legend<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 8\">&lt;fieldset&gt;\n  &lt;legend id=\"my_legend\"&gt;My Legend&lt;\/legend&gt;\n\n  This is a fieldset. We will get the legend label text using jQuery.\n&lt;\/fieldset&gt;\n\n&lt;input type=\"submit\" name=\"sbt_get_legend_text\" id=\"sbt_get_legend_text\" value=\"Get Legend Label Text\"&gt;\n\n\t\/\/Get\/Alert Fieldset Legend text when button is clicked\n\t$('#sbt_get_legend_text').on(\"click\", function(){\n\n\t\talert($('#my_legend').text());\n\n\t\treturn false;\t\n\n\t});<\/pre>\n<h3>Example #9:\u00a0Using jQuery .text(); method to get the Label Text of Div<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 9\">&lt;div id=\"my_div1\"&gt;This is my first div&lt;\/div&gt;\n&lt;input type=\"submit\" name=\"sbt_get_div_text\" id=\"sbt_get_div_text\" value=\"Get Div Text\"&gt;\n\n\t\/\/Get\/Alert div text when button is clicked\n\t$('#sbt_get_div_text').on(\"click\", function(){\n\n\t\talert($('#my_div1').text());\n\n\t\treturn false;\t\n\n\t});<\/pre>\n<h3>Example #10:\u00a0Using jQuery .text(); method to get the Label Text of List Item<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 10\">&lt;ul id=\"list_item\"&gt;\n&lt;li&gt;First Item&lt;\/li&gt;\n&lt;li&gt;Second Item&lt;\/li&gt;\n&lt;\/ul&gt;\n&lt;input type=\"submit\" name=\"sbt_get_li_text\" id=\"sbt_get_li_text\" value=\"Get 2nd List Item Text\"&gt;\n\n\t\/\/Get\/Alert 2nd list item text when button is clicked\n\t$('#sbt_get_li_text').on(\"click\", function(){\n\n\t\talert($('#list_item li:nth-child(2)').text());\n\n\t\treturn false;\t\n\n\t});<\/pre>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=2057\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p><strong>\u00a0That&#8217;s it!<\/strong><\/p>\n<p>Do you know of any other ways to use <em><strong>jQuery to\u00a0<\/strong><strong>Get Label Text<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML Label forms an easy &amp; important part when dealing with the\u00a0different\u00a0form elements as it allows us to define labels for them. The HTML Labels add to the usability as it toggles the associated control when the label is clicked upon. So far so good. But what if you needed to get the label text [&hellip;]<\/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":[42,41],"class_list":["post-2057","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-demos-2","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-xb","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/2057","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=2057"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/2057\/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=2057"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=2057"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=2057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}