Bootstrap Spinner wont stop after form submitted and API call compete

Question

I am using bootstrap and I am trying to setup a spinner when a form is submitted. I am able to get the spinner button to spin when the form is submitted however after it is submitted it just keeps spinning. I have looked all over but can't seem to figure out how to get this to stop once the API call is complete. How can i get this to spin when form is submitted, stop once API call is done and return back to usable button again after API call is complete?

html Code

<form id="form_id" name="form_id" class="form_id" method="POST" >
    <div class="input-group-append">
        <button type="submit" id="btnFetch" class="btn btn-primary mb-2">Submit</button>
    </div>
</form>

JS Code

$(document).ready(function() {
    $("#btnFetch").click(function() {
        $(this).prop("disabled", true);
        $(this).html(
            `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loading...`
        );
    });
});

Ajax call

$(document).ready(function() {
    $('.form_class1').on('submit', function(event) {
        $.ajax({
            data : {
                some_id: $('#some_id').val(),
            },
            type : 'POST',
            url : '/ajax_request_url1'

        })
        .done(function(data) {

            if (data.error) {

            }
            else {
                // Do Processing here....
            }

        });

        event.preventDefault();
        event.stopImmediatePropagation();

    });

});

This can be achieved in the code that handles the form submission (ajax, axios, etc.), but that code does not appear to be provided. — matticustard, May 16 '21 at 02:34
If you don't mind using just CSS3 and jQuery, here's one way to make sure the spinning stops after 3 seconds. https://stackoverflow.com/a/43306973/3825777 — react_or_angluar, May 16 '21 at 08:06
You might find this discussion helpful. https://stackoverflow.com/questions/54522830/bootstrap-4-loading-spinner-in-button — react_or_angluar, May 16 '21 at 08:08

score 2 · Accepted Answer · answered May 16 '21 at 04:26

You might consider reorganizing things a bit to simplify what's happening.

Create individual functions to handle the spinner states.

function startSpinner() {
    // your code to make the spinner start
    $("#btnFetch").prop("disabled", true);
    $("#btnFetch").html(
        `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loading...`
    );
}

function stopSpinner() {
    // you code to make the spinner stop
    // (i.e., return the button to its original state)
    $("#btnFetch").prop("disabled", false);
    $("#btnFetch").html('Submit');
}

Call your spinner functions at appropriate times during the submission process.

$(document).ready(function() {
    $('.form_class1').on('submit', function(event) {

        // initiate spinner
        startSpinner();

        $.ajax({
            data : {
                some_id: $('#some_id').val(),
            },
            type : 'POST',
            url : '/ajax_request_url1'
        })
        .done(function(data) {
            // ...
        })
        .always(function(dataOrjqXHR, textStatus, jqXHRorErrorThrown) {           
            // do when complete, even on error            
            // stop the spinner
            stopSpinner();
        });

        // should these be at the top?
        event.preventDefault();
        event.stopImmediatePropagation();

    });

});

Thank you, this was exactly what i was trying to do. Thanks for your help. — Max Powers, May 16 '21 at 15:24

Bootstrap Spinner wont stop after form submitted and API call compete

html Code

JS Code

Ajax call

1 Answers1