<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button data-spinning-button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
var zyllemMain = (function() {
function processSubmitLoader() {
$("button[data-spinning-button]").click(function(e) {
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
//you need to check the form before it goes into the if statement
//if ($form.valid()) {
$this
.append("<i class='fa fa-spinner fa-spin'></i>")
.attr("disabled", "");
setTimeout(() => {
$form.submit();
}, 2000);
//}
}
});
}
return {
initSpinnerButton: processSubmitLoader
};
})();
$(document).ready(function() {
zyllemMain.initSpinnerButton();
});
