基于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实现表单元素值的回写,布布扣,bubuko.com

时间: 2024-10-20 05:59:37

基于JQuery实现表单元素值的回写的相关文章

jquery设置表单元素为不可用代码实例

jquery设置表单元素为不可用代码实例:本章节通过简单的实例代码介绍一下如何将表单元素设置为不可用状态.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</t

Ajax中通过JS代码自动获取表单元素值的示例代码

我们在使用Ajax的时候,通常需要获取表单元素值,然后发送给后台的服务器端程序处理.如果表单元素不多的情况我们常常会通过GET方式来获取表单元素值,但如果表单元素非常多,此时就需要用POST方式来获取表单元素值,那么如何来获取表单元素值呢?下面给出一段JS代码即可自动获取表单元素的值了 http://www.qidian.com/BookReader/1839917,60421843.aspx http://www.qidian.com/BookReader/1839917,60422045.a

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

官方地址:http://validform.rjboy.cn/document.html 引用js后再加上以下css就可以使用了 .Validform_checktip{ margin-left:8px; line-height:20px; height:20px; overflow:hidden; color:#999; font-size:12px; } .Validform_right{ color:#71b83d; padding-left:20px; background:url(im

关于Artdialog插件中获取内部表单元素值的使用心得

在开发中既需要artdialog插件的美观大方,又需要自定义功能,所以就出现了以下情况(废话不多说,转入正题) 前台代码: 1 <input type="button" class="ontest" value="免费询盘"/> 2 <div style="display:none;clear:both;"> 3 <table> 4 <tr> 5 <td>姓名:<

用jquery获取表单元素

表单验证需要获得表单元素,下面是获取表单元素的方法 例子: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <script src="js/jquery-1.6.min.js" type="text/javascript"></script

jQuery选取表单元素

表单元素选择器 选择器                    说明 :button                 <button>元素和type属性值为button的<input>元素. :checkbox             type属性值为checkbox的<input>元素.使用$([type="checkbox"])能获得更高的性能. :checked               选中的单选按钮和复选框元素. :disabled    

Jquery常用表单元素操作总结

页面当中经常要做一些checkbox,radio,select,input等表单元素的操作.做为我这样的懒人早就该总结以下,免去用到的时候,不想从头写,又不得不去以前的代码中翻.下面的代码来自实际项目中,亲测可用.呵呵-- 一.checkbox 对checkbox的判断往往是checkbox有没有被勾选.也经常有一个复选框控制其它全部复选框的选中和取消选中.如下图: 页面左上角的复选框的选中控制表格中所有的复选框.代码如下: 为了操作方便,给控制全选的复选框增加一个id叫checkAll 下面的

用jQuery获取表单的值

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

基于jQuery的表单操作

1,文本框的聚焦和失焦 在对文本框进行操作时,通常为了提升用户体验,是用户的操作得到及时的反馈,会在文本框获得焦点时,让其颜色改变,然后在失去焦点时恢复为原来的样式,一般情况下,我们可以通过css的伪类选择器实现这个功能: <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />