前一段写了一篇关于防止表单重复提交 的代码,主要是通过替换表单的submit方法,并且添加表单的onsubmit事件实现的,有兴趣的朋友可以看:http://blog.csdn.net/mmcgzs/archive/2007/01/10/1479412.aspx。 今天看 javascript权威指南 的时候看到form的action属性类似于a元素的href属性,不但可以直接写普通url,也可以写javascript:这样的URL,也就是说可以执行一段脚本。
通过这个属性,把原来写的代码进行了改进,因为原来的方法需要处理两个地方表单的submit方法和onsubmit事件,如果通过修改表单的action来实现的话,只需要修改action这一个地方即可,实现如下:
<script language=javascript>function $submitForm(frm){//处理form的action frm.action=frm.submitUrl; frm.submit(); frm.action="javascript:void 0"; //破坏原有的action使其无法再次提交} function $setFormCheckSubmited() {//设置表单的action到$submitForm var frms=document.forms; for(var i=0;i<document.forms.length;i++) { if (frms[i].action.indexOf("javascript:")==-1) {//此处判断主要是为了防止重复加载,也防止修改action已经是脚本的form frms[i].submitUrl=frms[i].action;//定义submitUrl属性,用来保存表单原有的action frms[i].action = "javascript:$submitForm(document.forms["+i+"])" ; //此处是把表单的action属性设置到我们的$submitForm方法,此处出现了一个比较诡异的现象,我本打算设置为 $submitForm(this) 这样的代码,后来发现执行的时候报错:action无效,后来跟踪代码发现提交的是window对象,并不是form对象,个人感觉应该是由于action是表单的一个属性,并不是一个事件,所以无法传递自身对象导致,所以只能写成现在的样子,哪位高人有好的方法还请赐教。 } } }</script><form name=form1 action="http://www.sina.com.cn">1.<input type=submit >submit按钮2.<input type=text>当form中只有一个文本本框按回车的时候3.<input type=button οnclick=javascript:form1.submit() value="自己写脚本提交"></form><script language=javascript>$setFormCheckSubmited();//加载防止重复提交的代码,上一篇文章中有介绍如何把这段代码和上面的代码写道一起。</script>把上面的代码复制到一个htm页面里面就可以直接测试了,比原来的方法清晰易懂了一些,不过要想测试是否重复提交还需要写一段服务器端代码测试一下。