Spinner Doesn't Work While AJAX Does Its Job

Spinner Doesn't Work While AJAX Does Its Job

I'm trying to get a spinner to show up while my form does submitting data. So far, my AJAX works absolutely fine and does its job; but the spinner just won't show up! Here's my JavaScript (properly queued inside WordPress) -

--
  2. jQuery(document).ready(function($){
  3. //'use strict';
  4. $("form").submit(function() {
  5. event.preventDefault();
  6. $(".myspinner").css('display', 'inline-block');
  7. var wpajaxurl = document.location.protocol + '//' + document.location.host + '/wp-admin/admin-ajax.php';
  8. var form = $(this);
  9. var io_form_data = form.serialize();
  10. alert("Did The Spinner Load?");
  11. $.ajax({
  12. type:'POST',
  13. dataType:'json',
  14. url:wpajaxurl,
  15. data:io_form_data,
  16. async:false,
  17. success:function (data, textStatus) {
  18. console.log('SUCCESS', data);
  19. alert("SUCCESS");
  20. },
  21. error:function (jqXHR, textStatus, errorThrown) {
  22. alert("FAIL");
  23. }
  24. });
  25. });

  27. });
--

Observations: 
1. The spinner does show up when I use it inside AJAX, using 'beforeSend' -
--
$.ajax({
type:'POST',
dataType:'json',
url:wpajaxurl,
data:io_form_data,
async:false,
beforeSend: function() {
$(".myspinner").css('display', 'inline-block');
},
success:function (data, textStatus) {
console.log('SUCCESS', data);
alert("SUCCESS");
},
error:function (jqXHR, textStatus, errorThrown) {
alert("FAIL");
}
});

--

2. However, it won't show up if I put the selector before the ajax call. 

My aim is to show the spinner as soon as the user clicks on the button and then goes off once AJAX is done. So far, the script works well and shows me 'SUCCESS' message as intended; but without the spinner.

I'd really appreciate if you could tell me what exactly is going wrong; and what is the proper way to debug such problems? Thank you for reading.