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实现表单元素值的回写的更多相关文章

  1. 基于jquery的表单校验插件 - rjboy的Validform使用体验

    官方地址:http://validform.rjboy.cn/document.html 引用js后再加上以下css就可以使用了 .Validform_checktip{ margin-left:8p ...

  2. jQuery name属性与checked属性结合获取表单元素值

    var paytype = $("input[name='paytype']:checked").val(); alert(paytype); input元素下名称为paytype ...

  3. 6 个基于 jQuery 的表单向导插件推荐

    表单向导可以很好地引导用户进行一步一步的操作,从而降低用户错误输入的几率.尽管互联网中有大量的类似插件,但真正好用的不多. 本文整理了6个比较优秀的表单向导插件,希望能够为你带来帮助. 1. Smar ...

  4. 用jQuery获取表单的值

    在日常开发过程中,有许多用到表单的地方.比如登录,注册,比如支付,填写订单,比如后台管理等等. 使用jQuery来获取表单的值是比较常见的做法. 常见表单 单行文字域:<input type=' ...

  5. Jquery Form表单取值

    之前js取form表单的值都是一个一个的取,数量一多之后容易出错而且烦透了.感谢那些愿意分享的人. 页面定义form,并给form指定id值,里面的元素只要是需要键值对应的都赋予name属性,并且na ...

  6. jQuery选取表单元素

    表单元素选择器 选择器                    说明 :button                 <button>元素和type属性值为button的<input& ...

  7. jquery获取表单元素与回显

    一.获取哦表单元素 dcoument表单文本对象的集合 all[] 对所有html元素的访问 forms 返回对文档中所有form对象的引用 forms[1] 对所有form对象引用 <scri ...

  8. 基于jQuery的表单操作

    1,文本框的聚焦和失焦 在对文本框进行操作时,通常为了提升用户体验,是用户的操作得到及时的反馈,会在文本框获得焦点时,让其颜色改变,然后在失去焦点时恢复为原来的样式,一般情况下,我们可以通过css的伪 ...

  9. ajax上传文件 基于jquery form表单上传文件

    <script src="/static/js/jquery.js"></script><script> $("#reg-btn&qu ...

随机推荐

  1. fetch上传cookie数据方法

    Fetch 请求默认是不带cookie的.需要设置fetch的第二个参数: 先来看下,请求头部信息Request method - 使用的HTTP动词,GET, POST, PUT, DELETE, ...

  2. 使用filter: blur() 的时候解决图片周围泛白和容器外范围变模糊的问题

    类似于这种,这个时候出现了周围变模糊,并且边缘泛白的情况 周围模糊这个问题很好解决,给父容器加overflow:hidden:就可以了 效果如上,至于周围泛白的问题就需要动点脑筋了,给目标添加 tra ...

  3. VS2008 没办法太强大了

    原文发布时间为:2009-06-13 -- 来源于本人的百度文章 [由搬家工具导入] VS2008 太强大了。。。继续学习。。。。现在微软的某些强大功能也是针对 VS2008了。。。所以。。必须得装上 ...

  4. Repeater控件实现一行显示多条数据 Asp.net

    原文发布时间为:2009-05-11 -- 来源于本人的百度文章 [由搬家工具导入]        asp.net中Repeater控件可以很方便显示数据库的数据，使用传统的Table来布局,只能实现 ...

  5. MSP430G2553头文件解析

    MSP430寄存器中文注释---P1/2口(带中断功能)       /************************************************************     ...

  6. django + gunicorn + supervisor

    在服务器上跑着一个Django项目,想用supervisor管理起来,遇到一个小问题,记录一下本来启动Django项目的命令是用的manage.py ,  但是这中方法有个很神奇的坑,就是ctrl + ...

  7. css 之 position定位

    position属性一共有4个值,分别是static.absolute.relative.fixed. static为默认值,指块保持在原本应该在的位置上,即该值没有任何移动的效果. absolute ...

  8. js中eval()和$.parseJSON()的区别

    之前自己一直对ajax不是特别的熟悉,所以一般都很少用这个去写功能,但是最近这个项目中用到了,用ajax异步传数据,json传数据这个时候就需要去解析传过来的数据了,eval()和$.parseJSO ...

  9. 关于apache 虚拟主机配置访问403的问题

     <Directory />    Options FollowSymLinks    Order allow,deny    Allow from all</Directory&g ...

  10. git的使用学习（八）自定义git

    在安装Git一节中,我们已经配置了user.name和user.email,实际上,Git还有很多可配置项. 比如,让Git显示颜色,会让命令输出看起来更醒目: $ git config --glob ...