Jquery 表单提交时的沙漏

我有一个分析CSV文件的grails应用程序。我让它与表单一起工作，当人们上传表单时，可能需要30秒以上的时间才能进入下一页，在此期间，只有机敏或特别书呆子的观察者才会注意到该页面“正在等待来自……的响应”

有没有一种快速的方法可以在不改变表单机制的情况下使用javascript（可能是jQuery）来放置某种弹出窗口、沙漏或其他东西？我正在寻找一个快速修复方法，而不必将整个表单提交迁移到JQuery或其他什么东西

在我最初的尝试中，答案似乎是否定的。当单击正常表单提交时，浏览器似乎会停止页面，从而禁用javascript。但是，如果响应与javascript将执行的页面相同，那么这对我没有帮助

大概是这样的：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">jQuery(function(){
  alert("jquery aint buggeed");  //this happens
  $("#submitHandle4JQ").click(function(){alert("BE PATIENT!!");})  //this does not
}); </script>

...

<form action="/path/mySweetGrailsController/parseStuff" method="post" enctype="multipart/form-data" >
<input type="hidden" name="longNumber" value="935762708000464097" id="longNumber" /> 
<input type="file" name="bigFile" />
<input type="submit" text="Upload My File" name="submitHandle4JQ"/><br/>
</form>

jQuery（函数（）{
警报（“jquery aint buggeed”）；//发生这种情况
$（“#submitHandle4JQ”）。单击（函数（）{alert（“耐心点！！”）；}）//这不正确
}); 
...

如果您已经在使用jQuery，那么我认为BlockUI插件将对您有用。您可以使用它来屏蔽一个元素或整个页面，并在顶部覆盖一条消息。消息是HTML标记，因此它可以包含通常可以包含在HTML中的任何内容。一条短信，一个小时玻璃图，或者任何你能想到的东西。只需将BlockUI的激活附加到form.submit事件

---

试试这个。处理表单时，在正文中添加一个名为“waiting”的类，然后：

<style type="text/css">
.waiting { cursor: wait; }
</style>

.waiting{cursor:wait；}

浏览器对cursor属性的支持并不完美，但它的大部分缺陷都与为光标使用自定义图像有关，而不是与默认关键字（如“wait”）有关，这些关键字根据您使用的操作系统映射到默认图标（XP及更低版本中的沙漏、Windows 7中的旋转圆圈、旧Mac操作系统中的旋转沙滩球等）。见：

您必须进行试验，看看这在足够多的浏览器中是否能满足您的需要

---

编辑：哦，当你完成了使等待光标消失的操作后，再将.waiting类从正文中删除。

我知道这是一个旧的问题，但我找不到关于堆栈溢出的最新答案-不得不求助于

进程开始时的javascript

document.body.style.cursor = 'wait';

document.body.style.cursor = 'default';

进程结束时的javascript

document.body.style.cursor = 'wait';

document.body.style.cursor = 'default';

---

您的提交按钮上没有

id

。

$（“#submitHandle4JQ”）。单击（）

无法发生；您没有

id=“submitHandle4JQ”

元素，但是您有

$（'input:submit[name=“submitHandle4JQ”]”）元素之一。

您的web浏览器已经做到了这一点，并且已经做了将近二十年了。@mVChr:表单的id可能更有用，因为您可以挂接到form.submit事件中。不能保证在提交表单的过程中触发button.click事件，例如，在文本框中单击enter也会触发提交，但不会触发提交按钮的单击。感谢上帝。。。不是另一篇jQuery插件文章。完美答案。