{"id":2281,"date":"2011-06-24T11:41:57","date_gmt":"2011-06-24T06:11:57","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=2281"},"modified":"2011-06-24T11:41:57","modified_gmt":"2011-06-24T06:11:57","slug":"disable-inputs-after-submit-to-avoid-double-submission-using-jquery-and-ajax","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/disable-inputs-after-submit-to-avoid-double-submission-using-jquery-and-ajax\/","title":{"rendered":"Disable inputs after submit to avoid double submission using JQuery and Ajax"},"content":{"rendered":"

This tutorial will explain one of the ways to avoid accidental submissions of form using the JQuery and Ajax. While developing the web application this is the most common bug ignored by the newbies.<\/p>\n

I will use the JQuery library and the Ajax to accomplish this\u00a0behavior.<\/p>\n

\"Disable<\/a>
Disable inputs after submit to avoid double submission using JQuery<\/figcaption><\/figure>\n

Html Code :<\/strong><\/p>\n

\n<form id="frm1">\n     First Name:<input id="fName" name="fName" type="text" \/>\n     Last Name:<input id="lName" name="lName" type="text" \/>\n     Email:<input id="email" name="email" type="text" \/>\n     <input id="submit" name="submit" type="submit" \/>\n<\/form>\n<\/pre>\n
JQuery Code :<\/strong><\/p>\n
\n$(document).ready(function(){\n    $("#frm1").submit(function(){\n    \/\/Disable form inputs\n    $("input").attr("disabled", true);\n\n    var fName = $("fName").val();\n\tvar lName = $("lName").val();\n\tvar email = $("email").val();\n\n\tvar dataString = 'fName='+ fName + '&email=' + email + '&lName=' + lName;\n\n    $.ajax({\n    type: "POST",\n    url: "addUser.php",\n    data: dataString,\n    success: function(){\n    \/\/Enable form inputs after form successfully submitted\n    $("input").removeAttr('disabled');\n    }\n    });\n    return false;\n    });\n});\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
This article will explain the safe way to submit the forms using JQuery. It will avoid accidental double submission.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[26],"tags":[33,134],"class_list":["post-2281","post","type-post","status-publish","format-standard","hentry","category-web","tag-ajax","tag-jquery"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":3347,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/ajax-based-autocomplete-component-in-salesforce-using-jquery-ui-and-json\/","url_meta":{"origin":2281,"position":0},"title":"AutoComplete Component in Visualforce using JQueryUI","author":"Jitendra","date":"June 28, 2013","format":false,"excerpt":"In this tutorial, I am going to explain very Simple AJAX and JSON based Auto Complete component with the help of JQuery UI. First I am assuming that you already have Static Resource of named \"AutoCompleteWithModal\"\u009d. This Static resource has all images, CSS and JQuery library needed to implement this\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"JQuery UI and JSON based AJAX AutoComplete Component in Salesforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":790,"url":"https:\/\/www.jitendrazaa.com\/blog\/microsoft\/net\/row-expand-collapse-using-jquery-and-ajax\/","url_meta":{"origin":2281,"position":1},"title":"Row expand collapse using jquery and Ajax","author":"Jitendra","date":"August 19, 2010","format":false,"excerpt":"Using JQuery and Ajax to expand and collapse the row in ASP.NET","rel":"","context":"In "ASP.NET"","block_context":{"text":"ASP.NET","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/microsoft\/net\/"},"img":{"alt_text":"Ajax JQuery Row Expand Collapse","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/08\/rowexpand-300x203.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1527,"url":"https:\/\/www.jitendrazaa.com\/blog\/microsoft\/net\/ajax-based-multiselect-jquery-autocomplete-control-in-asp-net\/","url_meta":{"origin":2281,"position":2},"title":"Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net","author":"Jitendra","date":"February 19, 2011","format":false,"excerpt":"Tutorial on creating Ajax Based Multiselect JQuery Autocomplete User Control in ASP.Net","rel":"","context":"In "ASP.NET"","block_context":{"text":"ASP.NET","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/microsoft\/net\/"},"img":{"alt_text":"Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/02\/Ajax-Based-Multiselect-JQuery-Autocomplete-Control-in-ASP.Net_.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2706,"url":"https:\/\/www.jitendrazaa.com\/blog\/others\/tips\/handling-colon-in-element-id-in-jquery-visualforce-problem\/","url_meta":{"origin":2281,"position":3},"title":"Handling Colon in Element ID in JQuery – Visualforce problem","author":"Jitendra","date":"February 8, 2012","format":false,"excerpt":"Resolving the JQuery error when the Element ID contains colon with Live Demo","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2657,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/create-simple-drag-and-drop-widget-like-igoogle-using-jquery\/","url_meta":{"origin":2281,"position":4},"title":"Create Simple Drag and Drop Widget like iGoogle using JQuery","author":"Jitendra","date":"January 20, 2012","format":false,"excerpt":"Live Demo with source code on creating Simple Drag and Drop Widget using JQuery plugin like iGoogle","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"jQuery Drag and Drop Widgets","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/01\/jQuery-Drag-and-Drop-Widgets.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/01\/jQuery-Drag-and-Drop-Widgets.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/01\/jQuery-Drag-and-Drop-Widgets.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":1643,"url":"https:\/\/www.jitendrazaa.com\/blog\/java\/jsp\/servlet-hibernate-jquery-and-ajax-based-google-like-chat\/","url_meta":{"origin":2281,"position":5},"title":"Servlet, Hibernate, jQuery and Ajax based google like chat","author":"Jitendra","date":"March 14, 2011","format":false,"excerpt":"Servlet, Hibernate, jQuery and Ajax based google like chat with source code","rel":"","context":"In "Hibernate"","block_context":{"text":"Hibernate","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/java\/hibernate\/"},"img":{"alt_text":"Servlet, Hibernate, jQuery and Ajax based google like chat","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/03\/Servlet-Hibernate-jQuery-and-Ajax-based-google-like-chat.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=2281"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2281\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=2281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=2281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=2281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}