We use Node.js which is a server side JavaScript framework to quickly spin up a web server. jQuery is a UI library to iron over differences in JavaScript implementation between browser vendors and browser versions. Visual Studio Code IDE is a free tool that I am most comfortable with but you are free to use one that you feel at home with.<\/p>\n
1. Application Structure<\/h2>\n
Our application folder structure looks like below:<\/p>\n
![\"jQuery](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/07\/ProjectStructureButtonDisable.jpg\")
2. HTML Markup<\/h2>\n
index.html<\/em><\/span> This is what our landing page markup looks like, it has a simple login form with a submit button. It prompts the user for their email address and password and provides a Remember Me checkbox. I have used some style rules to layout the page.<\/p>\n To disable the submit button we will add a handler for the form’s submit event. In this event handler we will select the submit button and set its disabled attribute to disable it. We will also set the text of the button to a string, submitting form, to indicate to the user that the form is under processing. The selector for submit event handler would look like below:<\/p>\n Once we select the form we will, on submit event, disable the button which is a part of the form. To just select the button that is part of the form and not others on the page. We will use the below selector:<\/p>\n Notice the second param in the selector, it ensures that the button which is part of this form is selected. Once selected we will set the attribute using the attr jQuery function. As well as set the text of the button to “submitting…” like below:<\/p>\n Final version of our script, residing in myscript.js looks like below:<\/p>\n myscript.js<\/em><\/span><\/p>\n Notice the event.preventDefault() method call, it is there for the purposes of this demo and cancels the form submit and subsequent page refresh. So that we can see our script in action. It is not necessary other wise.<\/p>\n Now we can run our code by typing the below commands at the root of the project<\/p>\n Next we navigate to the url http:\/\/localhost:8080 to see our code in action. On clicking the Submit button we can see the below results.<\/p>\n<!DOCTYPE html>\n<html>\n<head>\n <script src=\"https:\/\/code.jquery.com\/jquery-3.4.1.slim.min.js\"\n integrity=\"sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=\" crossorigin=\"anonymous\"><\/script>\n <script src=\"myscript.js\"><\/script>\n <style>\n body {\n height: 500px;\n width: 100%;\n }\n .flex-container {\n height: 100%;\n display: flex;\n flex-direction: column-reverse;\n justify-content: center;\n align-items: center;\n }\n <\/style>\n<\/head>\n\n<body>\n <div class=\"flex-container\">\n <form>\n <fieldset>\n <legend>JCG -- jQuery Disable Submit Button Example<\/legend>\n <label for=\"inputEmail\">Email address<\/label>\n <input type=\"email\" id=\"inputEmail\" aria-describedby=\"emailHelp\" placeholder=\"Enter email\">\n\n <label for=\"inputPassword\">Password<\/label>\n <input type=\"password\" id=\"inputPassword\" placeholder=\"Password\">\n\n <input type=\"checkbox\" id=\"rememberMe\">\n <label for=\"rememberMe\">Remember Me<\/label>\n\n <button type=\"submit\">Submit<\/button>\n <\/fieldset>\n <\/form>\n <\/div>\n<\/body>\n<\/html> <\/pre>\n3. jQuery Script<\/h2>\n
$('form').submit(function (event) {});\n<\/pre>\n$('button', this);\n<\/pre>\n$(\"button\", this).attr(\"disabled\", \"disabled\");\n$(\"button\", this).text(\"Submitting...\");<\/pre>\n
$(document).ready(function() {\n $(\"form\").submit(function(event) {\n $(\"button\", this).attr('disabled', 'disabled');\n $(\"button\", this).text(\"Submitting...\");\n event.preventDefault();\n });\n}); <\/pre>\n4. Example in Action<\/h2>\n
>npm install\n>npm start\n<\/pre>\n
![\"\"](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/07\/jQueryButtonDisableDemo-1.jpg\")