基于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实现表单元素值的回写的更多相关文章
- 基于jquery的表单校验插件 - rjboy的Validform使用体验
官方地址:http://validform.rjboy.cn/document.html 引用js后再加上以下css就可以使用了 .Validform_checktip{ margin-left:8p ...
- jQuery name属性与checked属性结合获取表单元素值
var paytype = $("input[name='paytype']:checked").val(); alert(paytype); input元素下名称为paytype ...
- 6 个基于 jQuery 的表单向导插件推荐
表单向导可以很好地引导用户进行一步一步的操作,从而降低用户错误输入的几率.尽管互联网中有大量的类似插件,但真正好用的不多. 本文整理了6个比较优秀的表单向导插件,希望能够为你带来帮助. 1. Smar ...
- 用jQuery获取表单的值
在日常开发过程中,有许多用到表单的地方.比如登录,注册,比如支付,填写订单,比如后台管理等等. 使用jQuery来获取表单的值是比较常见的做法. 常见表单 单行文字域:<input type=' ...
- Jquery Form表单取值
之前js取form表单的值都是一个一个的取,数量一多之后容易出错而且烦透了.感谢那些愿意分享的人. 页面定义form,并给form指定id值,里面的元素只要是需要键值对应的都赋予name属性,并且na ...
- jQuery选取表单元素
表单元素选择器 选择器 说明 :button <button>元素和type属性值为button的<input& ...
- jquery获取表单元素与回显
一.获取哦表单元素 dcoument表单文本对象的集合 all[] 对所有html元素的访问 forms 返回对文档中所有form对象的引用 forms[1] 对所有form对象引用 <scri ...
- 基于jQuery的表单操作
1,文本框的聚焦和失焦 在对文本框进行操作时,通常为了提升用户体验,是用户的操作得到及时的反馈,会在文本框获得焦点时,让其颜色改变,然后在失去焦点时恢复为原来的样式,一般情况下,我们可以通过css的伪 ...
- ajax上传文件 基于jquery form表单上传文件
<script src="/static/js/jquery.js"></script><script> $("#reg-btn&qu ...
随机推荐
- 几个实用的 jQuery 插件
1. owl.carousel -- 强大实用的jQuery幻灯片插件 2. jquery.nicescroll.min.js -- 自定义滚动条样式,支持 div,iframe,html 等. 3. ...
- js 如何刷新页面
Javascript刷新页面的几种方法(未测试):1 history.go(0)2 location.reload()3 location=location4 location.assign(loca ...
- BZOJ 3876 支线剧情
支线剧情 [故事背景] 宅男JYY非常喜欢玩RPG游戏,比如仙剑,轩辕剑等等.不过JYY喜欢的并不是战斗场景,而是类似电视剧一般的充满恩怨情仇的剧情.这些游戏往往都有很多的支线剧情,现在JYY想花费最 ...
- 百度识图for windows phone 上线
原文发布时间为:2013-07-04 -- 来源于本人的百度文章 [由搬家工具导入] 百度识图主要用于找女神，找男神，找美图，找宠物，找图文新闻，找相似图，找原图，还能鉴别头像照片真伪，免得被网络照片 ...
- 乌班图中的ssh服务
SSH服务(TCP端口号22):安全的命令解释器 为客户机提供安全的Shell 环境,用于远程管理 ...
- hdu 2732 Leapin' Lizards 最大流 拆点 建图
题目链接 题意 给定一张网格,格子中有些地方有柱子,有些柱子上面有蜥蜴. 每个柱子只能承受有限只蜥蜴从上面经过.每只蜥蜴每次能走到相距曼哈顿距离\(\leq k\)的格子中去. 问有多少只蜥蜴能走出网 ...
- wireshark过滤数据
Wireshark使用WinPCAP作为接口,直接与网卡进行数据报文交换.用来获取网络数据封包,包括http,TCP,UDP,等网络协议包.使用者可以以免费的代价取得软件与其源代码,并拥有针对其源代码 ...
- MySQL命令行导入脚本文件
通过命令行执行sql脚本文件的方法: cmd命令行下: C:\users\test_dir>"C:\Program Files\MySQL\MySQL Server 5.7\bin\m ...
- TDictionary字典 记录 的赋值。
type TRen = record age: Integer; //把name定义成结构的属性. private Fname: string; procedure Setname(const Val ...
- C++ 找不到方法标识符
其实原因是这个CPP并没有面向对象的结构. 所以进行编译时是“顺序编译”的,而main函数的定义又在A的定义之前.自然找不到标识符了.