spinner on submit button while submitting form

Question

I am trying to add a spinner to the submit button when the form is in the process of being submitted.

The form is submitting fine but I cannot get the spinner to show. Please help me.

 (function () { $(document).on("click", "#submitbutton", function (event) { var elem = $(event.currentTarget); elem.addClass('active'); var formdata = $("#filterdata").serializeArray(); var url1 = "/SelectUnit"; $.ajax({url:"/echo/html", data: {delay:1}}).always(function(){ elem.removeClass('active'); }); }); })(); 

 .spinner { opacity: 0; display:none; width: 20px; height:10px; -webkit-transition: opacity 0.25s, max-width 0.45s; -moz-transition: opacity 0.25s, max-width 0.45s; -o-transition: opacity 0.25s, max-width 0.45s; transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */ } .has-spinner.active { cursor:progress; } .has-spinner.active .spinner { display:inline-block; opacity: 1; max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */ } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/todc-bootstrap/3.3.6-3.3.6/js/bootstrap.min.js"></script> <form id="quote-form" method="post" action="quote.php"> <div class="col-md-12"> <div class="messages"></div> </div> <div class="col-sm-6"> <div class="form-group"> <input id="form_subject" type="text" name="subject" class="form-control" placeholder="Subject *" required="required" data-error="Subject is required."> <div class="help-block with-errors"></div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <input id="form_name" type="text" name="name" class="form-control" placeholder="Your Name *" required="required" data-error="Your Name is required."> <div class="help-block with-errors"></div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone"> <div class="help-block with-errors"></div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required."> <div class="help-block with-errors"></div> </div> </div> <div class="col-sm-6"> <select id="form_contact_method" name="contact_method" class="selectpicker"> <option selected>Prefered contact method?</option> <option value="Phone">Phone</option> <option value="Email">Email</option> </select> <div class="help-block with-errors"></div> </div> <div class="col-sm-6"> <select id="form_budget" name="budget" class="selectpicker"> <option selected>Approximate budget?</option> <option class="custom-select-option" value="&euro; 50,- to &euro; 100,-">&euro; 50,- to &euro; 100,-</option> <option class="custom-select-option" value="&euro; 100,- to &euro; 250,-">&euro; 100,- to &euro; 250,-</option> <option class="custom-select-option" value="&euro; 250,- to &euro; 500,-">&euro; 250,- to &euro; 500,-</option> <option class="custom-select-option" value="&euro; 500,- to &euro; 1000,-">&euro; 500,- to &euro; 1000,-</option> <option class="custom-select-option" value="&euro; 1000,- plus">&euro; 1000,- plus</option> </select> <div class="help-block with-errors"></div> </div> <div class="col-sm-12 "> <div class="form-group"> <textarea id="form_message" name="message" class="form-control textarea" placeholder="Tell Us About Your Project" rows="5" required="required" data-error="Please,leave us a message."></textarea> <div class="help-block with-errors"></div> </div> </div> <div class="formbuttons"> <button type="submit" id="submitbutton" class="btn buttoncolor has-spinner"> <span class="spinner"><img src="http://assets2.bostonlogic.com/images/spinner.gif" width="10" height="10"></span>Get a Quote</button> </div> </form> 

I have tried with Jquery submit and a lot of other snippets I have fond till now no success.

Answer 1

您是否尝试在您的html文件中包含jQuery库？

Answer 2

I have created a jsfiddle link here your spinner working on that submit button you can check on that.

https://jsfiddle.net/shamshi1988/crmu4jav/