フォームを送信しているときに送信ボタンを押しているスピナー

フォームが送信されているときに送信ボタンにスピナーを追加しようとしています。フォームを送信しているときに送信ボタンを押しているスピナー

フォームは申し訳ありませんが、私はスピナーを表示することはできません。私を助けてください。私はjQueryを使って試してみました

(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"> 
 
\t <option selected>Prefered contact method?</option> 
 
\t <option value="Phone">Phone</option> 
 
\t <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>

は提出し、他のスニペットの多くは、私は今、ノー成功まで好きです。

出典

2017-02-25 user2765741