Orchard CMS — Disable submit button on dynamic form submit

When a form is being submitted, sometimes, as the users are waiting, they might click more than once the submit button. This may cause duplicates submissions.

First, we will disable the submit button when the form is valid.

$('form').submit(function() {
  if ($(this).valid()) {
    $(this).find('button[type="submit"]').prop('disabled', true);
  }
});

We can make it more beautiful if we add a loader as the user is waiting. For the loader in this example, I used FontAwesome Fonts 4.7.

$('form').submit(function () {
  if ($(this).valid()) {
    $(this).find('button[type="submit"]')
           .prop('disabled', true)
           .attr('style', 'background:none;border:none;')
           .html('<i class="fa fa-spinner fa-spin"></i>');
  }
});

This feature is already installed in this head start Orchard CMS theme.

Originally published at https://orchardtricks.dotnest.com.