JavaScript实现表单的分向提交
来源:互联网 发布:分享文章赚钱系统源码 编辑:程序博客网 时间:2024/05/29 12:24
在一般情况下,同一个表单只能被提交给同一个地址。但在实际web应用中,我们希望同一个表单可以根据用户的选择来完成不同的操作,即表单的分向提交。
比如说:在一个网站后台用户管理系统中,我需要对一些恶意的用户进行批量解锁,锁定用户或者删除的操作,当我选择删除会员时,我们希望表单会提交给能进行删除的处理程序,当我选择锁定会员时,我们希望表单会提交到锁定会员的处理程序,解锁会员也如此。我们极不愿意看到分别为这三个功能建立三个不同的页面,而其中仅仅是处理程序不同。
利用客户端JavaScript的功能,我们可以把三项功能简化一个界面就可以完成,一个select下拉框,其中放置要进行的操作,一个Submit按钮进行表单提交。
form表单如下:
<form action="actionPath" method="post" enctype="application/x-www-form-urlencoded" name="listform" id="listform"> <label> <select name="operate" size="1" id="operate"> <option value="delete">删除</option> <option value="lock">锁定</option> <option value="unlock">解锁</option> </select> </label> <input name="Submit" id="Submit" type="submit" value="确定" onclick="submitForm(this.form,'actionPath')" /></form>
提交表单的submitForm()函数:
<!-- 其中传递的参数为表单对象的引用和表单的action文件地址 ,提交后的action为[*Action?menthod=?]-->function submitForm(formObj,actionPath){ var select = document.getElementById("operate"); var str = []; for(i=0;i<select.length;i++){ if(select.options[i].selected){ str.push(select[i].value); } } if(confirm("确定要执行的操作吗?")){ for(var j = 0;j < str.length;j++){ formObj.action=actionPath + "?method=str[j]"; formObj.submit(); } return true; } return false;}
注意:
1、document.form.action和document.form.submit()的区别,action是属性,submit()是方法;
2、在表单中,不应有名字为action或submit这些特殊字符的标签(JavaScript区分大小写),否则IE中将会产生”对象不支持此属性和方法”的错误。
2 0
- JavaScript实现表单的分向提交
- JavaScript实现表单的分向提交
- JAVASCRIPT:-->用脚本实现表单的分向提交
- JAVASCRIPT:-->用脚本实现表单的分向提交
- document.form.action,表单分向提交,javascript提交表单
- document.form.action,表单分向提交,javascript提交表单
- document.form.action,表单分向提交,javascript提交表单
- document.form.action,表单分向提交
- 将表单内容向邮件提交的简单实现
- 利用vb向网页提交表单数据的实现代码
- 利用vb向网页提交表单数据的实现代码
- javascript实现回车提交表单
- 实现向网页中的表单提交数据
- 纯javascript的ajax实现php异步提交表单
- 使用JavaScript实现表单的前端简单验证后提交
- 表单提交验证的javascript
- JavaScript 控制表单的提交
- 实现向服务器上传图片文件、实现不同方式的form表单提交方式
- leetcode:Add Two Numbers 【Java】
- uva10245 - - The Closest Pair Problem(最近点问题)
- 卡特兰数经典题集
- 系统的权限管理
- MCV(转)
- JavaScript实现表单的分向提交
- ZOJ 1093 Monkey and Banana
- 【OpenGL】 001 Open a window
- unity关于图形学的基础知识-3D矩阵的变换(四)
- 高性能网站架构设计之缓存篇(2)- Redis 的配置
- WPF中ErrorTemplate导致的空引用at MS.Internal.Controls.TemplatedAdorner.MeasureOverride(Size constraint)
- mysql高可用方案MHA介绍
- Python安装第三方包package
- 获取文件路径