Disable Submit Button After a Form is Submitted

Once a user has submitted a form, you generally don’t want them to submit it a second time.¹ A nice way to handle this is to disable the submit button once the form has been submitted, while replacing the text in the submit button with a message to let the user know that their desired action has been taken.

Here is a little code that will disable the submit button and display that nice message:

View the code on Gist.

And here is a JS Fiddle to play around with.

Set the message to display by setting a data attribute on the submit button. If the data attribute isn’t set, we don’t do anything. This is a good safeguard against unexpected functionality, but if you want to disable the button for all forms anyway you can do so with a little code tweak.