{"id":829,"date":"2012-06-07T13:24:16","date_gmt":"2012-06-07T13:24:16","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=829"},"modified":"2012-06-07T13:24:16","modified_gmt":"2012-06-07T13:24:16","slug":"jquery-textbox-value-get-textbox-value-with-jquery-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-textbox-value-get-textbox-value-with-jquery-examples\/","title":{"rendered":"jQuery Textbox Value Examples"},"content":{"rendered":"<p><strong>jQuery Textbox Value:<\/strong> Have you wondered how to <strong>get textbox value using jQuery<\/strong>?\u00a0In jQuery, textbox value can be easily obtained by using just single line of code. Follow along for more info.<!--more--><\/p>\n<h2>How to Get jQuery Textbox Value Easily<\/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=829\" 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 few textboxes in a page, each with their own IDs. So let&#8217;s look at how to <strong>&#8220;get textbox value&#8221;<\/strong> using different ways.<\/p>\n<h2>Example 1: Get Textbox value using val() when a button is clicked<\/h2>\n<h3>HTML code to alert textbox value :<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 1: Get Textbox value using val() when a button is clicked\">&lt;p&gt;\nEnter Name and hit the button:\n&lt;input type=\"text\" name=\"name\" id=\"name\" \/&gt;\n\n&lt;input type=\"submit\" name=\"sbt_1\" id=\"sbt_1\" value=\"Alert Textbox Value\"&gt;\n\n&lt;\/p&gt;<\/pre>\n<h3>jQuery code to Get Textbox value using val()<\/h3>\n<pre class=\"lang:xhtml decode:true\">&lt;script type=\"text\/javascript\"&gt;\n\n\t$('#sbt_1').on(\"click\", function(e){\t\t\t\t\n\n\t\tvar value = $(\"#name\").val();\n\n\t\talert(value+ ' This alert is triggered because of button click');\n\n\t\te.preventDefault();\n\n\t});\n\n&lt;\/script&gt;<\/pre>\n<p>When you execute the above code, you will see a textbox and a button. Simply enter some value in it and hit the button. An alert will popup and that will show the textbox value. So that&#8217;s how you can <strong>easily<\/strong>\u00a0<strong>get textbox value when a button is clicked<\/strong>.<\/p>\n<h2>Example 2: Get Textbox value using .change() when textbox value is changed<\/h2>\n<h3>HTML Source to Get textbox value using change method:<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"HTML Source to Get textbox value using change method:\">&lt;p&gt;\nEnter City: &lt;input type=\"text\" name=\"city\" id=\"city\" \/&gt;\n&lt;\/p&gt;<\/pre>\n<h3>jQuery code to Get textbox value using change method:<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"jQuery code to Get textbox value using change method:\">&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function() {\n\n\t$(\"#city\").change(function(){\n\n\t\tvar value = $(this).val();\n\n\t\talert(value+ ' This alert is triggered because of change event using ID #city');\n\n\t});\n\n});\n\n&lt;\/script&gt;<\/pre>\n<p>When you run the above code and enter some value in the City box and then click outside of the box, an alert will show up with the value that you have entered in the textbox. So that&#8217;s how you can <strong>easily\u00a0get textbox value using jQuery with the help of the .change() method<\/strong>.<\/p>\n<h2>Example 3: Get Textbox value using .change() when textbox value is changed by means of input name attribute<\/h2>\n<h3>HTML Source to Get textbox value using change method by means of input name attribute:<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"HTML Source to Get textbox value using change method by means of input name attribute\">&lt;p&gt;\nEnter Town:\n&lt;input type=\"text\" name=\"town\" id=\"town\" \/&gt;\n&lt;\/p&gt;<\/pre>\n<h3>jQuery Code to Get textbox value using change method by means of input name attribute:<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"jQuery Code to Get textbox value using change method by means of input name attribute\">&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function() {\n\n\t$(\"input[name='town']\").change(function(){\n\n\t\tvar value = $(this).val();\n\n\t\talert(value+ ' This alert is triggered because of change event using ID input[name=\\'town\\']');\n\n\t});\n\n});\n\n&lt;\/script&gt;<\/pre>\n<p>When you run the above above code, it will show you the textbox for entering the Town. Once you enter the Town and click outside of the textbox, the value you have entered will be shown in alert box. So that&#8217;s how you can <strong>easily get textbox value using change method with the help of the input name\u00a0attribute<\/strong>.<\/p>\n<h2>Example 4: Get Textbox value using .change() when textbox value is changed by means of textbox class<\/h2>\n<h3>HTML Source to Get textbox value using change method by means of input textbox class<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"HTML Source to Get textbox value using change method by means of input textbox class\">&lt;p&gt;\nEnter Province:\n&lt;input type=\"text\" name=\"province\" id=\"province\" class=\"province_class\" \/&gt;\n&lt;\/p&gt;<\/pre>\n<h3>jQuery Code to Get textbox value using change method by means of input textbox class<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"jQuery Code to Get textbox value using change method by means of input textbox class\">&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function() {\n\n\t$(\".province_class\").change(function(){\n\n\t\tvar value = $(this).val();\n\n\t\talert(value+ ' This alert is triggered because of change in it using .province_class');\n\n\t});\n});\n\n&lt;\/script&gt;<\/pre>\n<p>When you run the above above code, it will show you the textbox for entering the Province. Once you enter the Province\u00a0and click outside of the textbox, the value you have entered will be shown in alert box. So that&#8217;s how you can <strong>easily get textbox value using change method with the help of the input textbox class<\/strong>.<\/p>\n<h2>Example 5: Get Textbox value using .blur() method<\/h2>\n<h3>HTML Source to Get textbox value using blur method<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"HTML Source to Get textbox value using blur method\">&lt;p&gt;\nEnter Zip Code:\n&lt;input type=\"text\" name=\"zip_code\" id=\"zip_code\" \/&gt;\n&lt;\/p&gt;<\/pre>\n<h3>jQuery Code to Get textbox value using blur method<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"jQuery Code to Get textbox value using change method by means of input textbox class\">&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function() {\n\n\t$(\"#zip_code\").blur(function(){\n\n\t\tvar value = $(this).val();\n\n\t\talert(value+ ' This alert is triggered because of blur');\n\n\t});\n\n});\n\n&lt;\/script&gt;<\/pre>\n<p>When you run the above above code, it will show you the textbox for entering the Zip Code. Once you enter the Zip Code\u00a0and click outside of the textbox, the value you have entered will be shown in alert box. So that&#8217;s how you can <strong>easily get textbox value using blur method<\/strong>.<\/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=829\" 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<h4>That&#8217;s it for now!<\/h4>\n<p>Do you know of any other ways to <strong>get textbox value using jQuery<\/strong>? Feel free to share below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>jQuery Textbox Value: Have you wondered how to get textbox value using jQuery?\u00a0In jQuery, textbox value can be easily obtained by using just single line of code. Follow along for more info.<\/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-829","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-dn","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/829","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=829"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/829\/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=829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=829"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}