title: Why isn't my Javascript being triggered on form submit?
body: <p>I'm trying to use a script I found searching around on SO to add a loading screen to a form submit request.   My form submits to a php script that generates a report in an Excel file, and the file takes 20 seconds or so to be generated.   I don't want my user submitting again or navigating away from the page in this time. </p>
  
  <p>The script I'm using can be found <a href="http://johnculviner.com/category/jquery-file-download/" rel="nofollow">here</a>.</p>
  
  <p>I think I have everything set up as needed according to the readme and even viewing the author's source, but the javascript isn't being triggered on the form submit event.   The form just submits as usual.   I know there's something simple I've got to be overlooking.</p>
  
  <p>Here's my code.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="cache-control" content="no-store" /&gt;
  &lt;meta http-equiv="pragma" content="no-cache" /&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="/Scripts/jquery.fileDownload.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/Scripts/Support/shCore.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/Scripts/Support/shBrushJScript.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/Scripts/Support/shBrushXml.js"&gt;&lt;/script&gt;
  &lt;link type="text/css" rel="stylesheet" href="/Content/shCoreDefault.css" /&gt;
  &lt;script type="text/javascript" src="/Scripts/Support/jquery.gritter.min.js"&gt;&lt;/script&gt;
  &lt;link type="text/css" rel="stylesheet" href="/Content/jquery.gritter.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script type="text/javascript"&gt;
  $(function(){
  $(document).on("submit", "form.fileDownloadForm", function (e) {
      $.fileDownload($(this).prop('action'), {
          preparingMessageHtml: "We are preparing your report, please wait...",
          failMessageHtml: "There was a problem generating your report, please try again.",
          httpMethod: "POST",
          data: $(this).serialize()
      });
      e.preventDefault(); //otherwise a normal form submit would occur
  });
  });
  &lt;/script&gt;
  &lt;form action="countsheet.php" method="post" class="fileDownloadForm"&gt;
  &lt;select name="sheet"&gt;
  &lt;option value="KeithDriveUnits"&gt;Keith Drive Units&lt;/option&gt;
  &lt;option value="FlooringPg1"&gt;Flooring Page 1&lt;/option&gt;
  &lt;option value="FlooringPg2"&gt;Flooring Page 2&lt;/option&gt;
  &lt;option value="FlooringPg3"&gt;Flooring Page 3&lt;/option&gt;
  &lt;option value="SpiratexCope"&gt;Spiratex &amp; Cope&lt;/option&gt;
  &lt;option value="AxlesTireMaxx"&gt;Axles &amp; Tire Maxx&lt;/option&gt;
  &lt;option value="ElectricalPg1"&gt;Electrical Page 1&lt;/option&gt;
  &lt;option value="ElectricalPg2"&gt;Electrical Page 2&lt;/option&gt;
  &lt;option value="ElectricalPg3"&gt;Electrical Page 3&lt;/option&gt;
  &lt;option value="ElectricalPg4"&gt;Electrical Page 4&lt;/option&gt;
  &lt;option value="ElectricalPg5"&gt;Electrical Page 5&lt;/option&gt;
  &lt;option value="ElectricalPg6"&gt;Electrical Page 6&lt;/option&gt;
  &lt;option value="ElectricalPg7"&gt;Electrical Page 7&lt;/option&gt;
  &lt;input type="submit" value="submit"&gt;&lt;/input&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>