{"id":633,"date":"2012-05-29T05:12:33","date_gmt":"2012-05-29T05:12:33","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=633"},"modified":"2012-05-29T05:12:33","modified_gmt":"2012-05-29T05:12:33","slug":"jquery-prevent-form-submit-2-ways","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-prevent-form-submit-2-ways\/","title":{"rendered":"jQuery Prevent Form Submit Examples &#8211; 2 Ways"},"content":{"rendered":"<p>When dealing with jQuery and Forms, you may want to use <em><strong>jQuery to prevent form submit <\/strong><\/em>unless certain conditions are met. There are way to <strong>disable default form submission using jQuery<\/strong> and I am going to discuss 2 ways of doing it. Each of these ways have only 1 line of code so it&#8217;s super easy for you follow and implement. Read on to find out more.<\/p>\n<p><!--more--><\/p>\n<h2>How to Prevent Form Submit using jQuery &#8211; Examples<\/h2>\n<p>Let&#8217;s assume that you are clicking a button with ID &#8220;my_button&#8221; and don&#8217;t want the form to be submitted unless the form meets the validation conditions. In such a case, here are the 2 methods you can use to prevent form submit in jQuery.<\/p>\n<h3>Example 1: Prevent Form Submission using return false; in jQuery<\/h3>\n<pre class=\"lang:xhtml decode:true\">$(\"#my_button\").click(function () {\n\/\/Some validation code here\n\nreturn false;\n};<\/pre>\n<h3>Example 2: Prevent Form Submission using e.preventDefault(); in jQuery<\/h3>\n<pre class=\"lang:xhtml decode:true\">$(\"#my_button\").click(function (e) {\n\/\/Some validation code here\n\ne.preventDefault();\n});<\/pre>\n<h4>So which one to use?<\/h4>\n<p>I recommend using e.preventDefault() as that is more appropriate for the purpose.<\/p>\n<h5>Very simple, isn&#8217;t it?<\/h5>\n<p>Do you know of any other ways in<strong>\u00a0<em>jQuery to stop form submit<\/em><\/strong>? Please feel free to share your comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When dealing with jQuery and Forms, you may want to use jQuery to prevent form submit unless certain conditions are met. There are way to disable default form submission using jQuery and I am going to discuss 2 ways of doing it. Each of these ways have only 1 line of code so it&#8217;s super [&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":[41],"class_list":["post-633","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-ad","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/633","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=633"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/633\/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=633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}