Welcome to my website


My name is Richard Watson and I'm a professional PHP developer
from Lurgan in Northern Ireland


Disabling buttons after form submission with jQuery

Posted by richard
Development | 05-02-2018


HTML CSS JQUERY

Are you suffering at the hands of impatient users, too impatient to wait for a form to process? Try this handy little jQuery snippet.

It's a common issue - users are impatient (should I capitalise the letter I?), too impatient to wait and see what the outcome of pressing a button on your website is. Has it saved? It's been 2.3 seconds, I don't know! Better click the button again just in case...

Any system should (by rote) contain back-end logic where required to prevent duplicate data submission, even if it's something as simple as a web-based forum checking the last post and stopping a user replying to themselves or something as complicated as checking an order and ensuring a customer isn't re-submitting their order. Beyond the back-end work, though, you can also try the following - it will disable all buttons after one is clicked. Word of warning - it's very specific. If you want to (for example) only disable button tags, or input tags, the code will require modification as in it's current iteration it will disable all button-type elements.

<Script type="text/javascript">
$(function() {
$('form').submit(function() {
$(":button").prop("disabled", true);
});
});
</Script>


Breakdown - $(":button") is the jQuery button pseudo-selector. You could replace this with $("button") for only button elements, or $("input[type=submit]") for old-style input buttons. .prop("disabled", true) will mark all of the named elements disabled and prevent them being clicked again and, of course, by using .submit() instead of .click() we're letting the form submission execute.

Have a play about and let me know if you have any tips or info you'd like to add.


You are not signed in


Register or sign-in to post comments
Twitter
Popular tags

XML

tag

design

check-in

Laravel

lightbox

types

Test

project

files

phpmyadmin

frameworks