title: How to prevent browsers from retrying failed POST requests (and check for internet connectivity)?
body: <p>I have a site intended for mobile users that would check the connectivity for every POST requests. If there is no internet connectivity, I will prompt out an error message for the user. Also, I would like to have a transition effect indicating that the form is being submitted.</p>
  
  <p><strong>I have the following code:</strong></p>
  
  <pre><code>var progress = 0;
  
  $('div').on('submit', 'form', function (e) {
      var thisform = this;
  
      if (progress === 1) {
  
          // check internet connection     
          var connection = hostReachable();
  
          if (!connection) {
              alert('No connection');
              setTimeout(function () { // re-allow submission after 8000 ms (not immediately to avoid browser retry)
                  progress = 0;
              }, 8000);
              return false;
          }
  
          return true;
      }
  
      e.preventDefault();
      e.stopPropagation();
  
      if (progress === 0) { // first submit
  
          // updated progress value            
          progress = 1;
  
          //form transition               
          $('.spinner').show('fast', function () {
              $('.pagecontent').fadeOut('fast');
              thisform.submit();
          });
      } else {
          // prevent submit retries when no connectivity
          return false;
      }
  });
  </code></pre>
  
  <p>where <code>hostReachable()</code> is a function for checking connectivity using xhr request.</p>
  
  <p>The problem is now after the <code>thisform.submit();</code> the form submission event seems to not triggered again. So the code inside <code>if (progress === 1)</code> is never run.</p>
  
  <p>What's wrong with my code? Thanks!</p>