spinning wheel when there's a weak signal

Question

I have a form that my users fill out on their cell phones, after the user hits the submit button, i have a spinning wheel that pops up so that the user doesnt hit the submit button again.

Unfortunately if their cell phone has a weak signal, the spinning wheel doesnt appear and the user hits the submit button again. This results in two forms being submitted.

If i hide the button on click, wouldnt i have the same program? The real issue is that the request is still being processed because of the weak signal when the user hits the submit button right? What other solutions are there?

#divLoading
{
display : none;
}
#divLoading.show
{
display : block;
position : fixed;
z-index: 100;
background-image : url('spinner.gif');
background-color:#666;
opacity : 0.4;
background-repeat : no-repeat;
background-position : center;
left : 0;
bottom : 0;
right : 0;
top : 0;

}

<script>
$(document).ready(function(){
   $("#saveandsubmitbutton").click(function(){
       $("div#divLoading").addClass('show');
   });
});
</script>

Answer 1

As an extra protection against submitting forms multiple times, you should disable the submit button immediately after it has been pressed.

<input type="submit" onclick="this.disabled = true" value="Submit"/>

Source: How to submit form only once after multiple clicking on submit?

As JD6969 commented above, additionally you could preload the spinner.gif image. I found a nice way to do this in another question:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['spinner.gif']).preload();

Source: Preloading images with jQuery

Answer 2

You should preload the spinner.gif.

<img src="spinner.gif" id="spinner">

#spinner { position:absolute; left:-9999px; top:-9999px }

Answer 3

<script>
$(document).ready(function(){
   $("#saveandsubmitbutton").click(function(){
       $("div#divLoading").addClass('show');
       $(document).off("click","#saveandsubmitbutton");
    });
  });
 </script>