{"id":572,"date":"2023-06-09T12:36:48","date_gmt":"2023-06-09T12:36:48","guid":{"rendered":"https:\/\/www.devopsconsulting.in\/blog\/?p=572"},"modified":"2023-07-01T12:37:20","modified_gmt":"2023-07-01T12:37:20","slug":"how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits","status":"publish","type":"post","link":"https:\/\/www.devopsconsulting.in\/blog\/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits\/","title":{"rendered":"How can I disable a submit button using jQuery to prevent multiple form submits?"},"content":{"rendered":"\n<p>This short post will teach you how to disable a button upon click in jQuery to stop multiple form submissions. Jquery enables us to prevent the submission of duplicate forms. To avoid duplicate form submission, we can quickly stop a button&#8217;s on-click event in jQuery.<\/p>\n\n\n\n<p>We occasionally use forms with a single submit button when dealing with PHP or another framework, such as Laravel CodeIgniter. The process of submitting our massive, lengthy form may take some time, so users may click numerous times before the form is actually submitted each time.<\/p>\n\n\n\n<p>Therefore, it is necessary to prevent multiple form submissions as well as double-clicking the submit button. then, how do we stop this? Using jQuery, we can accomplish it. when you press the submission button,<\/p>\n\n\n\n<p>You can use the php file below, which is a CLI written example for that. You can see the complete code below. You can also look at the complete code and this short jquery code.Again, click.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$('#myFormId').submit(function(){\n\n    $(\"#myButtonID\", this)\n\n      .html(\"Please Wait...\")\n\n      .attr('disabled', 'disabled');\n\n    return true;\n\n});\n\n<\/code><\/pre>\n\n\n\n<p><strong>Here is a full example, you can see.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;title>jQuery disable submit button on click to prevent multiple form submits - ItSolutionStuff.com&lt;\/title>\r\n    &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js\">&lt;\/script>\r\n&lt;\/head>\r\n&lt;body>\r\n   \r\n&lt;form id=\"myFormId\">\r\n    &lt;input type=\"text\" name=\"name\" placeholder=\"Name...\">\r\n    &lt;input type=\"text\" name=\"email\" placeholder=\"Email...\">\r\n   \r\n    &lt;button type=\"submit\" id=\"myButtonID\">Submit&lt;\/button>\r\n&lt;\/form>\r\n   \r\n&lt;script type=\"text\/javascript\">\r\n   \r\n$('#myFormId').submit(function(){\r\n    $(\"#myButtonID\", this)\r\n      .html(\"Please Wait...\")\r\n      .attr('disabled', 'disabled');\r\n    return true;\r\n});\r\n   \r\n&lt;\/script>\r\n   \r\n&lt;\/body>\r\n&lt;\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>This short post will teach you how to disable a button upon click in jQuery to stop multiple form submissions. Jquery enables us to prevent the submission&#8230; <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[86,101],"tags":[],"class_list":["post-572","post","type-post","status-publish","format-standard","hentry","category-javascript","category-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How can I disable a submit button using jQuery to prevent multiple form submits? - DevOps Consulting<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.devopsconsulting.in\/blog\/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How can I disable a submit button using jQuery to prevent multiple form submits? - DevOps Consulting\" \/>\n<meta property=\"og:description\" content=\"This short post will teach you how to disable a button upon click in jQuery to stop multiple form submissions. Jquery enables us to prevent the submission...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.devopsconsulting.in\/blog\/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits\/\" \/>\n<meta property=\"og:site_name\" content=\"DevOps Consulting\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-09T12:36:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-01T12:37:20+00:00\" \/>\n<meta name=\"author\" content=\"Abhishek Singh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abhishek Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits\\\/\"},\"author\":{\"name\":\"Abhishek Singh\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#\\\/schema\\\/person\\\/fc397ba8be42f9fdd53450edfc73006f\"},\"headline\":\"How can I disable a submit button using jQuery to prevent multiple form submits?\",\"datePublished\":\"2023-06-09T12:36:48+00:00\",\"dateModified\":\"2023-07-01T12:37:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits\\\/\"},\"wordCount\":185,\"commentCount\":2,\"articleSection\":[\"JavaScript\",\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits\\\/\",\"url\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits\\\/\",\"name\":\"How can I disable a submit button using jQuery to prevent multiple form submits? - DevOps Consulting\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#website\"},\"datePublished\":\"2023-06-09T12:36:48+00:00\",\"dateModified\":\"2023-07-01T12:37:20+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#\\\/schema\\\/person\\\/fc397ba8be42f9fdd53450edfc73006f\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits\\\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/\",\"name\":\"DevOps Consulting\",\"description\":\"DevOps Consulting | SRE Consulting | DevSecOps Consulting | MLOps Consulting\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/#\\\/schema\\\/person\\\/fc397ba8be42f9fdd53450edfc73006f\",\"name\":\"Abhishek Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g\",\"caption\":\"Abhishek Singh\"},\"description\":\"I\u2019m Abhishek, a DevOps, SRE, DevSecOps, and Cloud expert with a passion for sharing knowledge and real-world experiences. I\u2019ve had the opportunity to work with Cotocus and continue to contribute to multiple platforms where I share insights across different domains: \u2022 DevOps School \u2013 Tech blogs and tutorials \u2022 Holiday Landmark \u2013 Travel stories and guides \u2022 Stocks Mantra \u2013 Stock market strategies and tips \u2022 My Medic Plus \u2013 Health and fitness guidance \u2022 TrueReviewNow \u2013 Honest product reviews \u2022 Wizbrand \u2013 SEO and digital tools for businesses I\u2019m also exploring the fascinating world of Quantum Computing.\",\"url\":\"https:\\\/\\\/www.devopsconsulting.in\\\/blog\\\/author\\\/abhishek\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How can I disable a submit button using jQuery to prevent multiple form submits? - DevOps Consulting","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.devopsconsulting.in\/blog\/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits\/","og_locale":"en_US","og_type":"article","og_title":"How can I disable a submit button using jQuery to prevent multiple form submits? - DevOps Consulting","og_description":"This short post will teach you how to disable a button upon click in jQuery to stop multiple form submissions. Jquery enables us to prevent the submission...","og_url":"https:\/\/www.devopsconsulting.in\/blog\/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits\/","og_site_name":"DevOps Consulting","article_published_time":"2023-06-09T12:36:48+00:00","article_modified_time":"2023-07-01T12:37:20+00:00","author":"Abhishek Singh","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Abhishek Singh","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.devopsconsulting.in\/blog\/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits\/#article","isPartOf":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits\/"},"author":{"name":"Abhishek Singh","@id":"https:\/\/www.devopsconsulting.in\/blog\/#\/schema\/person\/fc397ba8be42f9fdd53450edfc73006f"},"headline":"How can I disable a submit button using jQuery to prevent multiple form submits?","datePublished":"2023-06-09T12:36:48+00:00","dateModified":"2023-07-01T12:37:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits\/"},"wordCount":185,"commentCount":2,"articleSection":["JavaScript","jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.devopsconsulting.in\/blog\/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.devopsconsulting.in\/blog\/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits\/","url":"https:\/\/www.devopsconsulting.in\/blog\/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits\/","name":"How can I disable a submit button using jQuery to prevent multiple form submits? - DevOps Consulting","isPartOf":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/#website"},"datePublished":"2023-06-09T12:36:48+00:00","dateModified":"2023-07-01T12:37:20+00:00","author":{"@id":"https:\/\/www.devopsconsulting.in\/blog\/#\/schema\/person\/fc397ba8be42f9fdd53450edfc73006f"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.devopsconsulting.in\/blog\/how-can-i-disable-a-submit-button-using-jquery-to-prevent-multiple-form-submits\/"]}]},{"@type":"WebSite","@id":"https:\/\/www.devopsconsulting.in\/blog\/#website","url":"https:\/\/www.devopsconsulting.in\/blog\/","name":"DevOps Consulting","description":"DevOps Consulting | SRE Consulting | DevSecOps Consulting | MLOps Consulting","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.devopsconsulting.in\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.devopsconsulting.in\/blog\/#\/schema\/person\/fc397ba8be42f9fdd53450edfc73006f","name":"Abhishek Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/790feefe779852cdf344ca7318bf6c13832223c9b3c6bf4d217658412041026d?s=96&d=mm&r=g","caption":"Abhishek Singh"},"description":"I\u2019m Abhishek, a DevOps, SRE, DevSecOps, and Cloud expert with a passion for sharing knowledge and real-world experiences. I\u2019ve had the opportunity to work with Cotocus and continue to contribute to multiple platforms where I share insights across different domains: \u2022 DevOps School \u2013 Tech blogs and tutorials \u2022 Holiday Landmark \u2013 Travel stories and guides \u2022 Stocks Mantra \u2013 Stock market strategies and tips \u2022 My Medic Plus \u2013 Health and fitness guidance \u2022 TrueReviewNow \u2013 Honest product reviews \u2022 Wizbrand \u2013 SEO and digital tools for businesses I\u2019m also exploring the fascinating world of Quantum Computing.","url":"https:\/\/www.devopsconsulting.in\/blog\/author\/abhishek\/"}]}},"_links":{"self":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts\/572","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/comments?post=572"}],"version-history":[{"count":1,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts\/572\/revisions"}],"predecessor-version":[{"id":573,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/posts\/572\/revisions\/573"}],"wp:attachment":[{"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/media?parent=572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/categories?post=572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsconsulting.in\/blog\/wp-json\/wp\/v2\/tags?post=572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}