9

Disable Submit Button After a Form is Submitted

 3 years ago
source link: http://alexking.org/blog/2015/05/17/disable-button-after-submit-jquery
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Disable Submit Button After a Form is Submitted

May 17, 2015

Once a user has submitted a form, you generally don’t want them to submit it a second time.1 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); } }); }); });

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.

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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK