Show spinner loader on submit button in form with click

Hamza Shah

I'm trying to show spinner loader when I click on submit button but submit button is not working. spinner loader appears for some time but submit button not hitting to the controller method. And if you have any better login on this please guide me.

Here's my button code

"send-button" class="btn btn-primary form-side__btn" type="submit" >Send
"button-spinner" style="margin-left: 10px; width: 15px; height: 15px; display: none" class="spinner-border">

And Here's my jquery code

$(document).ready(function () {
$('#send-button').click(function () {
$('#send-button').attr('disabled', true);
$('#button-spinner').show();
setTimeout(function () {
$('#button-spinner').hide();
}, 2000);
});
});

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Accepted answer
are you trying to show spinner inside the button?
if you want to show a loader on button submit then follow this.
step 1. Give you form an Id (myform)
step 2. copy paste below code in your view page and run.
Note:- if you are already referencing a jquery cdn or local then remove the jquery cdn i have used. there must be a single jquery reference on the page.
$(document).ready(function(){
  $("#myform").on("submit", function(){
    $("#pageloader").fadeIn();
  });//submit
});//document ready
#pageloader
{
  background: rgba( 255, 255, 255, 0.8 );
  display: none;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 9999;
}

#pageloader img
{
  left: 50%;
  margin-left: -32px;
  margin-top: -32px;
  position: absolute;
  top: 50%;
}
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

"pageloader">
   "http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="processing..." />

Hamza Shah5y ago

@Sachin Bro thankyou so much for always helping me

Hamza Shah5y ago

@salman beg ye brother it was working before. but after adding dive in button it stops working

Salman Beg5y ago

Did you provided the controller and action method correctly? Check that first. Thanks

Arnab Mukherjee5y ago

https://www.c-sharpcorner.com/article/enable-ajax-loader-in-asp-net-mvc/