Question

我正在尝试使用我在SO上搜索的脚本，为表单提交请求添加加载屏幕。我的表单提交到一个PHP脚本，该脚本在Excel文件中生成报告，该文件需要20秒左右才能生成。我不希望我的用户再次提交或导航离开页面。

我正在使用的脚本here。

我认为我根据自述文件设置了所有内容，甚至查看了作者的来源，但是javascript没有在表单提交事件中触发。表格像往常一样提交。我知道有一些简单的东西我必须要忽视。

这是我的代码。

<html>
<head>
<meta http-equiv="cache-control" content="no-store" />
<meta http-equiv="pragma" content="no-cache" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery.fileDownload.js" type="text/javascript"></script>
<script type="text/javascript" src="/Scripts/Support/shCore.js"></script>
<script type="text/javascript" src="/Scripts/Support/shBrushJScript.js"></script>
<script type="text/javascript" src="/Scripts/Support/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="/Content/shCoreDefault.css" />
<script type="text/javascript" src="/Scripts/Support/jquery.gritter.min.js"></script>
<link type="text/css" rel="stylesheet" href="/Content/jquery.gritter.css" />
</head>
<body>
<script type="text/javascript">
$(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
});
});
</script>
<form action="countsheet.php" method="post" class="fileDownloadForm">
<select name="sheet">
<option value="KeithDriveUnits">Keith Drive Units</option>
<option value="FlooringPg1">Flooring Page 1</option>
<option value="FlooringPg2">Flooring Page 2</option>
<option value="FlooringPg3">Flooring Page 3</option>
<option value="SpiratexCope">Spiratex & Cope</option>
<option value="AxlesTireMaxx">Axles & Tire Maxx</option>
<option value="ElectricalPg1">Electrical Page 1</option>
<option value="ElectricalPg2">Electrical Page 2</option>
<option value="ElectricalPg3">Electrical Page 3</option>
<option value="ElectricalPg4">Electrical Page 4</option>
<option value="ElectricalPg5">Electrical Page 5</option>
<option value="ElectricalPg6">Electrical Page 6</option>
<option value="ElectricalPg7">Electrical Page 7</option>
<input type="submit" value="submit"></input>
</body>
</html>

为什么我的Javascript在表单提交时被触发？

0 个答案: