现在的位置: 首页 > 综合 > 正文

防止表单重复提交的新方法(action拦截法)。

2013年10月19日 ⁄ 综合 ⁄ 共 1509字 ⁄ 字号 评论关闭

  前一段写了一篇关于防止表单重复提交 的代码,主要是通过替换表单的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 onclick=javascript:form1.submit() value="自己写脚本提交">
</form>
<script language=javascript>
$setFormCheckSubmited();//加载防止重复提交的代码,上一篇文章中有介绍如何把这段代码和上面的代码写道一起。
</script>

把上面的代码复制到一个htm页面里面就可以直接测试了,比原来的方法清晰易懂了一些,不过要想测试是否重复提交还需要写一段服务器端代码测试一下。

抱歉!评论已关闭.