表单提交时的沙漏答案

【问题标题】：Hourglass while form submits表单提交时的沙漏
【发布时间】：2011-05-23 21:44:07
【问题描述】：

我有一个解析 CSV 文件的 grails 应用程序。我让它与表单一起使用，当人们上传表单时，可能需要 30 秒以上才能获得下一页，在此期间，只有精明或额外的书呆子观察者会注意到该页面正在“等待来自..的响应”

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

在我最初的尝试中，答案似乎是否定的。单击正常表单提交时，浏览器似乎会丢弃禁用 javascript 的页面。但是，如果响应是 SAME PAGE，那么 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>

【问题讨论】：

您的提交按钮上没有id。
$("#submitHandle4JQ").click() 不能发生；你没有id="submitHandle4JQ" 的元素，但你有$('input:submit[name="submitHandle4JQ"]') 之一。
您的网络浏览器已经做到了这一点，而且它已经做到了将近二十年。
@mVChr：表单的 ID 可能更有用，因为您可以挂接到 form.submit 事件。 button.click 事件不保证在提交表单的过程中被触发，例如在文本框中敲回车也会触发提交但不会触发提交按钮的点击。

标签： jquery html forms submit hourglass

【解决方案1】：

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

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

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

http://reference.sitepoint.com/css/cursor

您必须进行试验，看看这是否适用于足够多的浏览器以满足您的需求。

编辑：哦，当你完成使等待光标消失时，再次将 .waiting 类从正文中移除。

【讨论】：

感谢上帝...不是另一个 jQuery 插件帖子。完美的答案。

【解决方案2】：

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

http://jquery.malsup.com/block/

【讨论】：

【解决方案3】：

我知道这很旧，但我找不到关于堆栈溢出的最新答案 - 不得不求助于 Code Ranch

进程开始时的javascript

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

进程结束时的javascript

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

【讨论】：