{"id":17078,"date":"2020-08-08T13:38:13","date_gmt":"2020-08-08T13:38:13","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=17078"},"modified":"2022-04-28T09:15:17","modified_gmt":"2022-04-28T09:15:17","slug":"jquery-form-events-an-jquery-for-beginners","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/jquery-form-events-an-jquery-for-beginners\/","title":{"rendered":"jQuery Form Events: An jQuery for Beginners"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">What is jQuery Form Events?<\/h3>\n\n\n\n<p>Events are things that happen to objects, such as the clicking of a command button or the opening and closing of a form, etc. These events trigger an action to be carried out. The\u00a0<strong>HTMLFormElement<\/strong>\u00a0interface represents a form element in the DOM; it allows access to and in some cases modification of aspects of the form, as well as access to its component elements. The form events are the same standard\u00a0<strong>JavaScript events<\/strong>\u00a0, but with added support by\u00a0<strong>jQuery<\/strong>\u00a0. A form event is fired when a form control receive or loses focus or when the user modify a form control value such as by typing text in a text input, select any option in a select box etc.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">What is are Type of jQuery Form Events<\/h4>\n\n\n\n<p>There are <strong>five types <\/strong>of jQuery Form Events<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/from.png\" alt=\"\" class=\"wp-image-17080\"\/><\/figure>\n\n\n\n<p><strong>focus() event<\/strong> <strong>=><\/strong> Focus means that the event will be triggered as soon as we focus on an input box. Let&#8217;s understand with an example<\/p>\n\n\n\n<p><strong>Example<\/strong>: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/focus1.png\" alt=\"\" class=\"wp-image-17086\"\/><\/figure>\n\n\n\n<p>My result after going to focus<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Capture25-1024x234.png\" alt=\"\" class=\"wp-image-17087\"\/><\/figure>\n\n\n\n<p><strong>blur() event<\/strong> => blur means that as soon as we remove focus from it, we call it to blur and my event will be triggered. Let&#8217;s understand with an example<\/p>\n\n\n\n<p><strong>Example:<\/strong> <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/blur.png\" alt=\"\" class=\"wp-image-17088\"\/><\/figure>\n\n\n\n<p>My results after being removed from focus after going to focus<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/blur2-1024x239.png\" alt=\"\" class=\"wp-image-17089\"\/><\/figure>\n\n\n\n<p><strong>change() Method<\/strong> => Change is the basic we look for with the Select box whenever we change the option of the Select box in the Select box, then this event will be triggered at the same time. Let&#8217;s understand with an example<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/change1.png\" alt=\"\" class=\"wp-image-17090\"\/><\/figure>\n\n\n\n<p><strong>Result<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/change-1-1024x576.png\" alt=\"\" class=\"wp-image-17096\"\/><\/figure>\n\n\n\n<p><strong>select() event<\/strong> => Select means that we have a live name written inside an input box, when we select it, then this event gets triggered. Let&#8217;s understand with an example<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/save.png\" alt=\"\" class=\"wp-image-17092\"\/><\/figure>\n\n\n\n<p><strong>Result<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/select-1024x576.png\" alt=\"\" class=\"wp-image-17097\"\/><\/figure>\n\n\n\n<p><strong>submit() event<\/strong> <strong>=><\/strong> The\u00a0<strong>submit event<\/strong>\u00a0is one of the more popular form elements (right behind the change event). The method submits () attaches an event handler that executes a function when the submit event occurs or triggers the event. This event occurs whenever a form is\u00a0<strong>submitted<\/strong>. Let&#8217;s understand with an example<\/p>\n\n\n\n<p><strong>Example:<\/strong> <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/submitted-form.png\" alt=\"\" class=\"wp-image-17093\"\/><\/figure>\n\n\n\n<p><strong>Result:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/submitted-1024x232.png\" alt=\"\" class=\"wp-image-17094\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>What is jQuery Form Events? Events are things that happen to objects, such as the clicking of a command button or the opening and closing of a form, etc. These&#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[2],"tags":[6330,561,6329,6328,1591,5028],"class_list":["post-17078","post","type-post","status-publish","format-standard","hentry","category-uncategorised","tag-blur","tag-change","tag-focus","tag-form-events","tag-select","tag-submit"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17078","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=17078"}],"version-history":[{"count":0,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17078\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=17078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=17078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=17078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}