{"id":810,"date":"2012-06-07T04:58:01","date_gmt":"2012-06-07T04:58:01","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=810"},"modified":"2012-06-07T04:58:01","modified_gmt":"2012-06-07T04:58:01","slug":"jquery-get-textbox-id-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-get-textbox-id-examples\/","title":{"rendered":"jQuery Get Textbox ID Examples"},"content":{"rendered":"<p>Did you need to find out what the ID of a Textbox is using jQuery and do not know how to retrieve it? In this article, I am going to share with you a very simple way t use <em><strong>jQuery to get textbox ID<\/strong><\/em>. Actual code is just 1 line, so it&#8217;s super easy to follow and implement.<!--more--><\/p>\n<h2>How to Get Textbox ID using jQuery<\/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=810\" 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>Let&#8217;s assume that you have 3 textboxes with ID &#8220;city&#8221;, &#8220;state&#8221; &amp; &#8220;country&#8221;.\u00a0<strong>The HTML code for the textboxes would be:<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"HTML code \">&lt;p&gt;Enter City:\n&lt;input type=\"text\" name=\"city\" id=\"city\" \/&gt;\n&lt;\/p&gt;\n\n&lt;p&gt;Enter Country:\n&lt;input type=\"text\" name=\"country\" id=\"country\" \/&gt;\n\n&lt;input type=\"submit\" name=\"sbt_get_country_id\" id=\"sbt_get_country_id\" value=\"Get Country ID\"&gt;\n\n&lt;\/p&gt;\n\n&lt;p&gt;Enter State:\n&lt;input type=\"text\" name=\"state\" id=\"state\" class=\"my_state\" \/&gt;\n&lt;\/p&gt;<\/pre>\n<p>Now you want to get the ID of the textbox whose value has been changed. \u00a0You can do it in the following manner:<\/p>\n<h3>Example 1: Get Textbox ID on change in jQuery<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 1\">&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function() {\n\n\t$('input[type=\"text\"]').change(function(){\n\n\t\tvar id = $(this).attr('id');\n\n\t\talert(id +' Alert triggered due to change in input[type=\"text\"]');\n\t});\n\n});\n\n&lt;\/script&gt;<\/pre>\n<p>When you run the above example, you will see the 3 input textbox. Simply enter anything in any of these boxes and click outside the box so that the textbox loses focus. As soon as you do that, you will see the JavaScript alert that shows you the ID of the textbox in which you just made the change.<\/p>\n<h3>Example 2 &#8211;\u00a0Get Textbox ID using name attribute in jQuery<\/h3>\n<p>Let&#8217;s take the above example as the basis for this example. Let&#8217;s assume that you have only the name of the textbox and now you want to get the textbox ID using just the name, as soon as you click a button. For illustration purposes, let&#8217;s assume that you want to get the ID of the &#8220;country&#8221; textbox using just it&#8217;s name, when the &#8220;Get Country ID&#8221; button is clicked.\u00a0You can do it as below:<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 2\">&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function() {\n\n\t$(\"#sbt_get_country_id\").on('click', function(){\n\n\t\tvar id = ( $('input[name=\"country\"]').attr('id') );\n\n\t\talert(id+' Alert triggered due to Button Click');\n\n\t});\n\n});\n\n&lt;\/script&gt;<\/pre>\n<p>In the above example, when you run the page, simply click on the &#8220;Get Country ID&#8221; button.\u00a0You will receive a JavaScript alert box that gives you the ID of the &#8220;country&#8221; textbox. Note that we are using the &#8220;name&#8221; attribute of the &#8220;country&#8221; textbox in order to get it&#8217;s ID.<\/p>\n<h3>Example 3 &#8211;\u00a0Get Textbox ID using class in jQuery<\/h3>\n<p>Let&#8217;s assume that you have applied a class of &#8220;my_state&#8221; to the State textbox. You can now find out the ID of this textbox when it&#8217;s value is changed, using the class like so:<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 3\">&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function() {\n\n\t$('.my_state').change(function(){\n\n\t\tvar id = $(this).attr('id');\n\n\t\talert(id+' Alert triggered due to use of class');\n\n\t});\n\n});\n\n&lt;\/script&gt;<\/pre>\n<p>When you run the above example, you will see the 3 input textbox. Simply enter anything in the State textbox and click outside the box so that the textbox loses focus. As soon as you do that, you will see the JavaScript alert that shows you the ID of the textbox in which you just made the change.<\/p>\n<p>You can apply the same technique to multiple textboxes i.e. apply the same class to any other textbox you may have in the page. As soon as you enter something in the textbox and click outside it, it will alert the ID of that textbox.<\/p>\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=810\" 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<h5>That&#8217;s it!<\/h5>\n<p>Do you know of any other ways to <strong>get textbox ID using jQuery<\/strong>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Did you need to find out what the ID of a Textbox is using jQuery and do not know how to retrieve it? In this article, I am going to share with you a very simple way t use jQuery to get textbox ID. Actual code is just 1 line, so it&#8217;s super easy to [&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,43,41],"class_list":["post-810","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-snippets","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-d4","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/810","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=810"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/810\/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=810"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=810"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}