Invest with Cake DeFi and get guaranteed returns from your crypto assets. Register Now
All Articles

Spinning button onSubmit form with jQuery and ASP.NET MVC

At Zyllem, we are leveraging ASP.NET MVC 5 to build our product. So basically, almost 80% of our code base and UI stuff is doing as server side. 20% of the code is the client-side app written in JavaScript in AngularJS, and also TypeScript in Angular 2/4.


There is a traditional UX issue is when we submit the form, sometimes the server takes a long time to respond to the client so that the page stays the same. Most of the time, what we do is to try to click the submit button again, and again. In few last sprint, my boss and I introduced the spinner button.

  1. We add an attribute data-spinning-button to the button with type submit in every form.
  2. In jQuery, we find the parents of the button that match a form and try to validate the form.
  3. If the form is valid, change the button content to be a spinner with a Fontawesome icon.
  4. Because it is the server side code, so every time we finished proceeding on the server the whole view will be rendered again. It is same If there is any error, so we don’t have to worry about If the error happens.

The purpose is to inform user that the system is proceeding their request and also prevent them from submitting the form multiple times by disabling the button.

The sample code in MVC looks like.

@using (var f = Html.Bootstrap().Begin(new Form().LabelWidthMd(4))) {
@Html.Bootstrap().TextBoxFor(x =>
x.UserName).Placeholder("Email").ShowValidationMessage(true)
@Html.Bootstrap().PasswordFor(x =>
x.Password).Placeholder("Password").ShowValidationMessage(true)

<button type="submit" class="btn btn-primary btn-block" data-spinning-button>
  Log in
</button>
}
var zyllemMain = (function() {
  function processSubmitLoader() {
    $('button[data-spinning-button]').click(function() {
      var $this = $(this)
      let formId = $this.data('spinning-button')
      let $form = formId ? $('#' + formId) : $this.parents('form')
      if ($form.length) {
        //form.valid() will be applicable If you are using jQuery validate https://jqueryvalidation.org/
        //asp.net mvc used it by default with jQuery Unobtrusive Validation
        if ($form.valid()) {
          $this
            .html("<i class='fa fa-circle-o-notch fa-spin'></i>")
            .attr('disabled', '')
          $form.submit()
        }
      }
    })
  }
  return {
    initSpinnerButton: processSubmitLoader,
  }
})()

$(document).ready(function() {
  zyllemMain.initSpinnerButton()
})
Published 11 Dec 2017

Recent Posts

Find a sequence to produce a number by adding 5 or multiplying by 3

Just read an interesting problem this morning. It seems not to be difficult

Integrate Angular 2+ and Webpack in an ASP.NET MVC 5 application

I will summarize the steps needed to integrate Angular 2 and Webpack build process in an MVC 5 application


Follow @tuantrungvo on Twitter for more!