{"id":1138,"date":"2012-09-11T22:04:30","date_gmt":"2012-09-11T22:04:30","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1138"},"modified":"2012-09-11T22:04:30","modified_gmt":"2012-09-11T22:04:30","slug":"jquery-on-change-using-on-method-change-event-examples-jquery","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-on-change-using-on-method-change-event-examples-jquery\/","title":{"rendered":"jQuery on change method Examples"},"content":{"rendered":"<p>One of the most powerful tools in jQuery is the\u00a0<strong>.on() method<\/strong>. The .on() method is the successor of other (older) methods such\u00a0.bind(), .delegate(), and .live().\u00a0.on() method lets you perform an action pretty much, whenever you require or when a certain condition is met. In this article, I am going to share with you a very easy and simple example that depicts how the <em><strong>on change event in jQuery<\/strong><\/em> can really help you. So get ready &amp; follow along.<!--more--><\/p>\n<h2>Short Intro to jQuery\u00a0.on() method:<\/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=1138\" 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>The\u00a0.on() method was introduced in jQuery 1.7, so make sure you are using at least the said version or above in order for the following code to work. So what essentially, the .on() method does is that it\u00a0attaches event handlers to the currently selected set of elements in the\u00a0jQuery object. At this point, it is worth mentioning that there are 2 more methods closely assosicated with the .on() method. They are:\u00a0.off() method and\u00a0.one() method.<\/p>\n<h3>Why use .off() method?<\/h3>\n<p>Use it to remove events bound with .on().<\/p>\n<h3>Why use .on() method?<\/h3>\n<p>Use it to attach an event that runs only once and then removes itself.<\/p>\n<p>I will try to explain the .off() and .on() methods in an another article. Now let&#8217;s get back to our awesome mighty on change event.<\/p>\n<h4>Examples of jQuery on change:<\/h4>\n<p>Let us assume that we have a States dropdown list with some values &amp; the ID of this dropdown is &#8220;#states&#8221;. What we are going to do here are 3 things. They are:<\/p>\n<p>1. Dynamically\u00a0alert the value of the option that was selected<\/p>\n<p>2. Write the value to a div with ID &#8220;#selected_value&#8221;.<\/p>\n<p>3.\u00a0Write the value to a an input textbox with class &#8220;.new_state&#8221;.<\/p>\n<p><strong>Here is the full, commented source code (HTML + jQuery):<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;jQuery on change examples&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery-1.8.2.min.js\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;label for=\"states\"&gt;States&lt;\/label&gt;\n&lt;select name=\"states\" id=\"states\"&gt;\n&lt;option value=\"Texas\"&gt;Texas&lt;\/option&gt;\n&lt;option value=\"Alabama\"&gt;Alabama&lt;\/option&gt;\n&lt;option value=\"Illinois\"&gt;Illinois&lt;\/option&gt;\n&lt;\/select&gt;\n\n&lt;div id=\"selected_value\"&gt;&lt;\/div&gt;\n\n&lt;label for=\"new_state\"&gt;New State:&lt;\/label&gt;\n&lt;input type=\"text\" name=\"new_state\" id=\"new_state\" class=\"new_state\"&gt;\n\n&lt;script type=\"text\/javascript\"&gt;\n\n$('#states').on(\"change\", function(){\n\n\/\/Get the selected value\nvar selected_value = $(\"#states option:selected\").val();\n\n\/\/1. Alert the selected value\nalert( selected_value );\n\n\/\/2. Write the selected value to our div\n$('#selected_value').html('The new State value is: '+ selected_value);\n\n\/\/3. Write the selected value to our input box with class .new_state\n$('.new_state').val(selected_value);\n\n});\n\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>As you can see, we are doing multiple operations upon a single &#8220;change&#8221; event using the .on() method in jQuery very easily. This method is very helpful when you are performing similar operations on elements that previously did not exist in the page, when the page was initially loaded, but were later added to the page dynamically. Yes, this means that you can use the .on() method safely on elements that were added to the page using AJAX.<\/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=1138\" 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>Your Turn!<\/h5>\n<p>Do you know of any other ways to use <strong>jQuery on change<\/strong>? Feel free to share by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the most powerful tools in jQuery is the\u00a0.on() method. The .on() method is the successor of other (older) methods such\u00a0.bind(), .delegate(), and .live().\u00a0.on() method lets you perform an action pretty much, whenever you require or when a certain condition is met. In this article, I am going to share with you a very [&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,119,41],"class_list":["post-1138","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-onchange","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-im","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1138","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=1138"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1138\/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=1138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}