随着各行各业“被互联网”的现象出现，互联网在">我们的生活中变的无处不在，作为数据信息收集的表单是其中一个不可或缺的角色。当页面向服务器提交数 据时，如果数据在后台处理需要花费一定的时间才能完成，那么在前端页面停留的这段时间用户的感觉会是乏味的，碰到性急的使用者，甚至避免不了提交按钮被其一次又一次的点击，这样不仅降低了用户的体验效果，更重要的是影响到了系统的性能和稳定性。
对于上述问题的解决方法，我们通常的做法是在用户第一次进行正常提交操作后禁用掉提交按钮，或者把提交按钮隐藏，给出一个相对友好的提示信息。以致从浏览器端达到防止表单重复提交的功能，并且也增强了用户的使用体验。
本文将通过具体实例详细介绍如何实现上述效果，以及在实现过程中因不同浏览器的兼容性不同，而引发的一些问题。
禁用提交按钮并使用沙漏图标给出提示
一个表单可以被应用到程序中实现各种数据收集的功能，如用户登录注册、条件查询、发表微博信息等，它的作用是让用户跟服务器去做数据交互。我们这里使用表单实现一个简单的查询功能。如清单 1 用户在文本框中输入关键字，点击“查询”按钮后提交表单，然后该按钮被隐藏，同时出现一个不停转动的沙漏图标提示用户操作正在处理。代码如下：
清单 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> <title>Search Test</title> <style type="text/css"> body{margin:0;padding:0;} .content{margin:0 auto;w
idth:350px;font:13px/27px Arial,sans-serif;} .content input, .content img{vertical-align:middle;margin-left:3px;} .content .input_text{border:1px solid #ccc;height:18px;} .content #submit_btn{height:24px;} </style> <script type="text/javascript">
function getId(id) { return document.getElementById(id); } function validation() { getId("submit_btn").style.display="none"; getId("wait_tip").style.display=""; return true; } </script> </head> <body> <div class="content"> <form action="http://loading.ibm.com/" enctype="multipart/form-data" method="get" onsubmit="return validation();"> <label>Keyword:</label> <input name="q" class="input_text" type="text" value=""/> <input value="Search" id="submit_btn" type="submit" /> <span id="wait_tip" style="display:none;"><img src="images/loading.gif" id="loading_img"/> Please wait...</span> </form> </div> </body> </html>
图 1.页面效果
图 2.提交效果
我们将清单 1 的代码保存成 .html 格式文件，使用 IE 浏览器打开，输入关键字后进行表单提交时会发现 GIF 格式的沙漏图标是无法正常转动的（如果提交后页面跳转过快而来不及观看效果，可以把 Form 表单的 action 属性值修改为一个打开慢的网址），而相同的操作在 Firefox、Chrome 浏览器中是正常的。