Unable to Show/Hide span spinner through Javascript & AJAX?

Question

I'm trying to show and hide a spinner on a submit button of a contact form. While the form is being submitted the spinner should be showed on the button. As soon as the form gets submitted the spinner should be hidden.

Here's my submit button along with the spinner span:

<div class="d-flex justify-content-center">
  <button class="btn btn-medium btn-fancy btn-primary mb-0 ls-wider" type="submit" id="submitButton">
    <span class="submitSpinner spinner-border spinner-border-sm me-1"></span> Send Message
  </button>
</div>

And this is the AJAX function I'm using:

      $(document).ready(function() {
        $('.submitSpinner').css('display','none');
        $("#contact-form").submit(function(e) {
          e.preventDefault();
          $('#submitButton').text('Sending Message');
          $('.submitSpinner').css('display','inline-block');
          var data = {
            'name': $('#name').val(),
            'email': $('#email').val(),
            'phone': $('#phone').val(),
            'company': $('#company').val(),
            'message': $('#message').val(),
          }
          $.ajaxSetup({
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
          });
          $.ajax({
            type: "POST",
            url: "/contact/message/send",
            data: data,
            dataType: "json",
            success: function(response) {
              // console.log(response);
              if (response.status == 400) {
                $.each(response.errors, function(key, error) {
                  $('#contact-alerts').append('<div class="col-12 col-md-9 col-lg-7 alert alert-danger alert-dismissible fade in show" role="alert"><button type="button" class="btn-close line-height-unset" data-bs-dismiss="alert" aria-label="Close"></button>' + error + '</div>')
                });
                $('.submitSpinner').css('display','none');
              } else {
                $("#contact-form")[0].reset();
                $('#submitButton').text('Send Message');
                $('.submitSpinner').css('display','none');
                $.magnificPopup.open({
                  showCloseBtn: true,
                  items: {
                    src: '#contact-success'
                  },
                  type: 'inline',
                  fixedContentPos: false,
                  fixedBgPos: true,
                  overflowY: 'auto',
                  closeBtnInside: true,
                  preloader: false,
                  midClick: true,
                  removalDelay: 300,
                  blackbg: true,
                  mainClass: 'my-mfp-slide-bottom',
                });
              }
            }
          });
        });
      });

Answer 1

a) You need to put spinner outside of button

b) Add a class initially which has dispaly:none CSS applied on it.

c) Now use .show() and .hide() to work around it.

Working sample:

$(document).ready(function() {
  $("#submitButton").click(function(e) {
    e.preventDefault();
    $('.submitSpinner').show();
    setTimeout(
      function() {
         $('.submitSpinner').hide();
      }, 5000);
   
  });
});

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex justify-content-center">
  <button class="btn btn-medium btn-fancy btn-primary mb-0 ls-wider" type="submit" id="submitButton">Submit</button>
  <br>
  <span class="submitSpinner spinner-border spinner-border-sm me-1 hide">Send Message...</span>
</div>