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

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实现表单元素值的回写

最新文章

热门文章