Disable Submit Button After a Form is Submitted : alexking.org

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:

	jQuery(function($) {
	// set data-after-submit-value on input:submit to disable button after submit
	$(document).on('submit', 'form', function() {
	var $form = $(this),
	$button,
	label;
	$form.find(':submit').each(function() {
	$button = $(this);
	label = $button.data('after-submit-value');
	if (typeof label != 'undefined') {
	$button.val(label).prop('disabled', true);
	}
	});
	});
	});

view raw

jquery-disable-button-after-submit.js

hosted with ❤ by GitHub

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.

Some folks insist on double-clicking on the web. ↩