I have a Bootstrap button that submit a form using jQuery AJAX, and return json values, and I need to change the button to a spinner and disable it when clicked and then return button to original state when the json data has been returned.
I have tried to initiate this on submit in the jQuery, but I am unable to get it to change the button, and I get no errors in the console.
My code I have so far :
$(function() {
var id = '1';
$('#SharedMailGroupForm' + id).submit(function() {
$("#SharedMailUpdateButton").prop("disabled", true);
$("#SharedMailUpdateButton").html(
`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>`
);
$.post($(this).attr("action"), $(this).serialize(), function(jsonData) {
// this is the callback, do all the work that depends on `jsonData` in here
$('#SharedMailGroupColumn' + id).fadeIn("slow").removeClass("HiddenDIV");
console.log(jsonData.Value1);
setTimeout(function() {
$('#SharedMailGroupColumn' + id).fadeIn("slow").addClass("HiddenDIV");
}, 10000);
$('#SharedMailGroupText' + id).html(jsonData.Value1);
}, "json");
$("#SharedMailUpdateButton").html(
`<span><i class="far fa-save"></span>`
);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="input-group-append">
<button id="SharedMailUpdateButton" class="btn btn-primary" type="submit" form="SharedMailGroupForm1" data-toggle="tooltip" data-placement="right" title="Gem Shared Mail Grupper"><span>Save</span></i></button>
</div>