码迷,mamicode.com
首页 > Web开发 > 详细

基于JQuery实现表单元素值的回写

时间:2014-08-20 00:05:25      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:表单   回写   

form.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>
<meta http-equiv="ptable-Type" ptable="text/html; charset=GBK">
<title>表单回写</title>
<script type="text/javascript"	src="jquery.form_util.js"></script>
<script type="text/javascript">
$(function() {
	var obj={
			name:"张四",
			area:"591",
			sex:"11",
			enjoy:"100011",			
			note:"xxxxxxxxxxx"
	};
	FormUtil.set(obj);
	
});
</script>
</head>
<body>
姓名:<input id="name" name="name" type="text"><br/>
地区:<select id="area" name="area" >
	<option value="9999">---请选择---</option>
	<option value="591">福州</option>
	<option value="592">厦门</option>
	<option value="593">宁德</option>
</select><br/>
性别:<input id="sex" name="sex" type="radio" value="11">男 
<input id="sex" name="sex" type="radio" value="12">女<br/>
兴趣:<input id="enjoy" name="enjoy" type="checkbox" value="1">AA 
<input id="enjoy" name="enjoy" type="checkbox" value="1">BB
<input id="enjoy" name="enjoy" type="checkbox" value="1">CC
<input id="enjoy" name="enjoy" type="checkbox" value="1">DD
<input id="enjoy" name="enjoy" type="checkbox" value="1">EE
<input id="enjoy" name="enjoy" type="checkbox" value="1">FF
<br/>
备注:<textarea id="note" name="note" rows="10" cols="10"></textarea><br/>
</body>
</html>


jquery.form_util.js:

/**表单元素回写工具
 * wumingkun 2014-08-19
 */
var FormUtil={
		//值回写方法
		set:function(obj){
			var attr;
			for(attr in obj){
				var element=$("#"+attr)[0];
				var nodeName=element.nodeName;
				if(nodeName=="INPUT"){
					FormUtil.judgeType($(element).attr("type"),attr,obj[attr]);
				}else if(nodeName=="SELECT"){
					FormUtil.setSelect(attr,obj[attr]);
				}else if(nodeName=="TEXTAREA"){
					FormUtil.setValue(attr,obj[attr]);
				}
			}
		},
		//设置文本框 文本域 密码框 隐藏框
		setValue:function(key,value){
			$("#"+key).val(value);
		},
		//设置下拉框
		setSelect:function(key,value){
			$("#"+key+" option").each(function(){
				if(this.value==value){
					$(this).attr("selected","selected");
				}
			});
		},
		//设置radio
		setRadio:function(key,value){
			$(":radio[name='"+key+"']").attr("checked",false);
			$(":radio[value='"+value+"']").attr("checked",true);
		},
		//设置checkbox
		setCheckbox:function(key,value,isDefault){
			$(":checkbox[name='"+key+"']").attr("checked",false);
			if(isDefault){
				var vs=value.split("");
				for(var i=vs.length-1;i>=0;i--){
					if(vs[i]=="1"){
						$(":checkbox[name='"+key+"']").filter(":eq("+(vs.length-1-i)+")").attr("checked",true);
					}
				}
			}else {
				
			}
		},
		//input类型判断
		judgeType:function(type,key,value){
			if(type=="text"||type=="password"||type=="hidden"){
				FormUtil.setValue(key,value);
			}else if(type=="radio"){
				FormUtil.setRadio(key,value);
			}else if(type=="checkbox"){
				FormUtil.setCheckbox(key,value,true);
			}
		}
};



基于JQuery实现表单元素值的回写,布布扣,bubuko.com

基于JQuery实现表单元素值的回写

标签:表单   回写   

原文地址:http://blog.csdn.net/wobendiankun/article/details/38691009

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!