提交表单时提交按钮的微调器

Question

我正在尝试在表单处于提交过程中时向提交按钮添加微调器。

表单正在提交，但我无法让微调器显示出来。 请帮帮我。

(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>

我已经尝试过Jquery提交和其他许多我喜欢的片段，直到现在都没有成功。

Answer 1

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

Answer 2

我在这里创建了一个jsfiddle链接，你的微调器处理你可以查看的提交按钮。

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