{"id":1154,"date":"2012-09-12T14:17:07","date_gmt":"2012-09-12T14:17:07","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1154"},"modified":"2012-09-12T14:17:07","modified_gmt":"2012-09-12T14:17:07","slug":"jquery-form-form-events-selectors-helper-functions-etc-in-jquery","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-form-form-events-selectors-helper-functions-etc-in-jquery\/","title":{"rendered":"jQuery Form Events, Selectors, Helper Functions, etc."},"content":{"rendered":"

In general, working with Forms can easily become tedious and boring. But not anymore with jQuery. jQuery forms are relatively simple & easy to work with, provided you know the right events to call and to attach the right event handlers to the correct elements. So in this article, I am going to compile a list of jQuery Form<\/strong> events, Selectors Helper functions, etc. that will serve as handy reference. Read on to review the list.<\/p>\n

How to use Form events, Selectors, Helper Functions, etc. in jQuery<\/h2>\n

Let’s start with Form events<\/strong>.<\/p>\n

jQuery Form Events<\/h3>\n

.blur()<\/strong>
\nYou can trigger this event on an element or bind an event handler to the “blur” JavaScript event.<\/p>\n

.change()<\/strong>
\nYou can trigger this event on an element or bind an event handler to the “change” JavaScript event.<\/p>\n

.focus()<\/strong>
\nYou can trigger this event on an element or bind an event handler to the “focus” JavaScript event.<\/p>\n

.select()<\/strong>
\nYou can trigger this event on an element or bind an event handler to the “select” JavaScript event.<\/p>\n

.submit()<\/strong>
\nYou can trigger this event on an element or bind an event handler to the “submit” JavaScript event.<\/p>\n

jQuery Form Selectors<\/h3>\n

:checked<\/strong>
\nThis Selector matches all elements that are checked.<\/p>\n

:disabled<\/strong>
\nThis Selector selects all elements that are disabled.<\/p>\n

:enabled<\/strong>
\nThis Selector selects all elements that are enabled.<\/p>\n

:focus<\/strong>
\nThis Selector selects element if it is currently focused.<\/p>\n

:selected<\/strong>
\nThis Selector selects all elements that are selected.<\/p>\n

jQuery Helper Functions<\/h3>\n

jQuery.param()<\/strong>
\nThis creates a serialized representation of an array or object that can be used in an Ajax request or in a URL query string.<\/p>\n

.serialize()<\/strong>
\nThis encodes a set of form elements as a string for submission.<\/p>\n

.serializeArray()<\/strong>
\nThis encodes a set of form elements as an array of names and values.<\/p>\n

jQuery Form Attributes<\/h3>\n

.attr()<\/strong>
\nIt is used to get the value of an attribute for the first element in the set of matched elements.<\/p>\n

.hasClass()<\/strong>
\nUsed to check whether any of the matched elements are assigned the given class.<\/p>\n

.html()<\/strong>
\nUsed to get the HTML contents of the first element in the set of matched elements.<\/p>\n

.prop()<\/strong>
\nUsed to get the value of a property for the first element in the set of matched elements.<\/p>\n

.removeAttr()<\/strong>
\nUsed to remove an attribute from each element in the set of matched elements.<\/p>\n

.removeClass()<\/strong>
\nUsed to remove a single class, multiple classes, or all classes from each element in the set of matched elements.<\/p>\n

.removeProp()<\/strong>
\nUsed to remove a property for the set of matched elements.<\/p>\n

.toggleClass()<\/strong>
\nUsed to add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the switch argument.<\/p>\n

.val()<\/strong>
\nUsed to get the current value of the first element in the set of matched elements.<\/p>\n

That’s it for now!<\/h5>\n

Do you know of any other jQuery Form Selectors, Helper Functions, Events, Attributes<\/strong><\/em>, etc.? Feel free to share by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"

In general, working with Forms can easily become tedious and boring. But not anymore with jQuery. jQuery forms are relatively simple & easy to work with, provided you know the right events to call and to attach the right event handlers to the correct elements. So in this article, I am going to compile a […]<\/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":[40],"class_list":["post-1154","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-2"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-iC","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1154","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=1154"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1154\/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=1154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}