{"id":2074,"date":"2013-01-23T18:32:01","date_gmt":"2013-01-23T18:32:01","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=2074"},"modified":"2013-01-23T18:32:01","modified_gmt":"2013-01-23T18:32:01","slug":"jquery-set-label-set-label-text-using-jquery-examples-jquery-label","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-set-label-set-label-text-using-jquery-examples-jquery-label\/","title":{"rendered":"jQuery Set Label Text Examples"},"content":{"rendered":"<p>In the previous article, we talked about HTML Labels and how they form an easy &amp; important part when dealing with the\u00a0different\u00a0form elements as it allows us to define labels for them. Let&#8217;s assume that you have some HTML elements on a web page but without their corresponding labels or their existing labels need to be changed. What if you needed to\u00a0set the Label Text of an input element such as Textbox, Textarea, Checkbox, Select Dropdown, Div,or any other element? In this article, I am going to share with you easy ways to<strong>\u00a0<em>jQuery to set label text of input elements &amp; page elements<\/em><\/strong>\u00a0with easy to follow examples. So read on to find out more.<!--more--><\/p>\n<h2>How to use jQuery to Set 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=2074\" 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 <strong><em>how to set the label of different form elements such as textbox, textarea, select dropdown menu, div, list item, etc<\/em>.<\/strong> 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 <strong>set the label text using jQuery<\/strong>:<\/p>\n<h3>Example #1:\u00a0Using jQuery .text(); method to Set 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_set_textbox_text\" id=\"sbt_set_textbox_text\" value=\"Set Input Textbox Label Text\"&gt;\n\n\t\/\/Set Input textbox label text when button is clicked\t\n\t$('#sbt_set_textbox_text').on(\"click\", function(){\n\n\t\t $('label[for=first_name]').text('MY CUSTOM LABEL TEXT');  \n\n\t\treturn false;\t\n\n\t});<\/pre>\n<h3>Example #2:\u00a0Using jQuery .text(); method to Set 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_set_textarea_text\" id=\"sbt_set_textarea_text\" value=\"Set Input Textarea Label Text\"&gt;\n\n\t\/\/Set Input textarea label text when button is clicked\t\n\t$('#sbt_set_textarea_text').on(\"click\", function(){\n\n\t\t$('label[for=message]').text('MY CUSTOM LABEL TEXT');  \n\n\t\treturn false;\t\n\n\t});<\/pre>\n<h3>\u00a0Example #3:\u00a0Using jQuery .text(); method to Set 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_set_dropdown_text\" id=\"sbt_set_dropdown_text\" value=\"Set Select Dropdown Label Text\"&gt;\n\n\t\/\/Set Select Dropdown label text when button is clicked\t\n\t$('#sbt_set_dropdown_text').on(\"click\", function(){\n\n\t\t $('label[for=states]').text('MY CUSTOM LABEL TEXT');\n\n\t\treturn false;\t\n\n\t});<\/pre>\n<h3>Example #4:\u00a0Using jQuery .text(); method to Set the Label Text of Input Checkbox<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 4\">    &lt;label for=\"fruits_0\"&gt;Apple&lt;\/label&gt; \n      &lt;input type=\"checkbox\" name=\"fruits\" value=\"apple\" id=\"fruits_0\"&gt;\n    &lt;br&gt;\n    &lt;label for=\"fruits_1\"&gt;Mango&lt;\/label&gt;\n      &lt;input type=\"checkbox\" name=\"fruits\" value=\"mango\" id=\"fruits_1\"&gt;\n\n    &lt;br&gt;\n    &lt;label for=\"fruits_2\"&gt;Grapes&lt;\/label&gt;\n      &lt;input type=\"checkbox\" name=\"fruits\" value=\"grapes\" id=\"fruits_2\"&gt;\n\n    &lt;br&gt;\n&lt;input type=\"submit\" name=\"sbt_set_checkbox_text\" id=\"sbt_set_checkbox_text\" value=\"Set Selected Checkbox Label Text\"&gt;\n\n\t\/\/Set checked checkboxes text when button is clicked\n\t$('#sbt_set_checkbox_text').on(\"click\", function(){\t\n\n\t\t$('input[name=\"fruits\"]:checked').each(function(index) {\n\n\t\t\tvar id = $(this).attr('id');\n\t\t\t$(\"label[for='\"+id+\"']\").text('MY CUSTOM LABEL TEXT');\n\n\t\t});  \t\t  \n\n\t\treturn false;\t\n\n\t});<\/pre>\n<h3>Example #5:\u00a0Using jQuery .text(); method to Set the Label Text of Input Radiobutton<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 5\">    &lt;label for=\"subscribe_0\"&gt;Yes&lt;\/label&gt;  \n    &lt;input type=\"radio\" name=\"subscribe\" value=\"Yes\" id=\"subscribe_0\"&gt;   \n  &lt;br&gt;\n    &lt;label for=\"subscribe_1\"&gt;No&lt;\/label&gt; \n    &lt;input type=\"radio\" name=\"subscribe\" value=\"No\" id=\"subscribe_1\"&gt;\n  &lt;br&gt;\n  &lt;input type=\"submit\" name=\"sbt_set_radiobutton_text\" id=\"sbt_set_radiobutton_text\" value=\"Set Selected Radibutton Label Text\"&gt;\n\n\t\/\/Set checked checkboxes text when button is clicked\n\t$('#sbt_set_radiobutton_text').on(\"click\", function(){\t\n\n\t\t$('input[name=\"subscribe\"]:checked').each(function(index) {\n\n\t\t\tvar id = $(this).attr('id');\n\t\t\t$(\"label[for='\"+id+\"']\").text('MY CUSTOM LABEL TEXT');\n\n\t\t});\n\n\t\treturn false;\t\n\n\t});<\/pre>\n<h3>Example #6:\u00a0Using jQuery .text(); method to Set 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_set_file_upload_text\" id=\"sbt_set_file_upload_text\" value=\"Set File Upload Label Text\"&gt;\n\n\t\/\/Set File Upload label text when button is clicked\t\n\t$('#sbt_set_file_upload_text').on(\"click\", function(){\n\n\t\t$('label[for=attachment]').text('MY CUSTOM LABEL TEXT');\n\n\t\treturn false;\t\n\n\t});<\/pre>\n<h3>Example #7:\u00a0Using jQuery .text(); method to Set 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_set_button_text\" id=\"sbt_set_button_text\" value=\"Set Button Label Text\"&gt;\n\n\t\/\/Set Button text when button is clicked\n\t$('#sbt_set_button_text').on(\"click\", function(){\n\n\t\t$('#test_button').attr(\"value\", 'MY CUSTOM BUTTON VALUE');\t\t\t\n\n\t\treturn false;\t\n\n\t});<\/pre>\n<h3>Example #8:\u00a0Using jQuery .text(); method to Set 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 set the legend label text using jQuery.\n&lt;\/fieldset&gt;\n\n&lt;input type=\"submit\" name=\"sbt_set_legend_text\" id=\"sbt_set_legend_text\" value=\"Set Legend Label Text\"&gt;\n\n\t\/\/Set Fieldset Legend text when button is clicked\n\t$('#sbt_set_legend_text').on(\"click\", function(){\n\n\t\t$('#my_legend').text('MY CUSTOM LABEL TEXT');\n\n\t\treturn false;\t\n\n\t});<\/pre>\n<h3>Example #9:\u00a0Using jQuery .text(); method to Set 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_set_div_text\" id=\"sbt_set_div_text\" value=\"Set Div Text\"&gt;\n\n\t\/\/Set div text when button is clicked\n\t$('#sbt_set_div_text').on(\"click\", function(){\n\n\t\t$('#my_div1').text('MY CUSTOM LABEL TEXT');\n\n\t\treturn false;\t\n\n\t});<\/pre>\n<h3>Example #10:\u00a0Using jQuery .text(); method to Set the Label Text of List Item<\/h3>\n<pre class=\"lang:xhtml decode:true crayon-selected\" 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_set_li_text\" id=\"sbt_set_li_text\" value=\"Set 2nd List Item Text\"&gt;\n\n\t\/\/Set 2nd list item text when button is clicked\n\t$('#sbt_set_li_text').on(\"click\", function(){\n\n\t\t$('#list_item li:nth-child(2)').text('MY CUSTOM LABEL 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=2074\" 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>That&#8217;s it!<\/strong><\/p>\n<p>Do you know of any other ways to <strong>Set Label Text Using jQuery<\/strong>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>jQuery Set Label: In the previous article, we talked about HTML Labels and how they form an easy &#038; important part when dealing with the different form elements as it allows us to define labels for them. Let&#8217;s assume that you have some HTML elements on a web page but without their corresponding labels or their existing labels need to be changed. What if you needed to Set Label Text of an input element such as Textbox, Textarea, Checkbox, Select Dropdown, Div,or any other element? Do you know how to set label for input and\/or for an element? If not, this article is for you. In this article, I am going to share with you easy ways to set label text of input elements &#038; page elements using jQuery with easy to follow examples. So 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":[42,41],"class_list":["post-2074","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-xs","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/2074","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=2074"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/2074\/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=2074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=2074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=2074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}