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

最新推荐文章于 2022-05-29 21:22:14 发布
最新推荐文章于 2022-05-29 21:22:14 发布
阅读量3.2k 收藏 1
点赞数
分类专栏： jquery 文章标签： 表单 回写
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wobendiankun/article/details/38691009
版权

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);
			}
		}
};



颠坤
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现form表单元素序列化为json对象的方法
10-23
主要介绍了jQuery实现form表单元素序列化为json对象的方法,涉及jQuery基于serializeArray方法实现表单序列化的相关技巧,需要的朋友可以参考下
数据回填
qq_44568325的博客
05-28 193
开发工具与关键技术： vs 异步数据回填 作者： 周乐献 撰写时间： 2019 年 5月 28 日 异步即指的是不管其他事件进程的状态，继续执行其他的操作。这样可以不必等上面的操作，节省了很多的时间。 数据回填则是给自己所需要回填数据的input标签一个id，通过这些id提取回填所需要的数据。 <div ...
form表单数据回填
weixin_52568086的博客
05-29 1054
前言： 我相信很多人在做项目的时候都会碰到数据回填，每当有一个修改页面那么 就逃不掉，可以说修改跟回填是已经牢牢挂钩了，那么这时候有很多小伙伴 就会很头疼了，当我们的页面的form表单需要回填的数据特别特别多的时候， 这时候如果还一个一个文本框的为他们去设置它们的value值时，就会浪费掉 我们大量的时间和精力，这种做法无疑是十分愚蠢的，那有没有一种方法，可 已让我们轻松一些呢？ 答案是：有的。。。那么开始正题。 数据回填说白了就是先向控制器发出请求，然后请求回来数据后，按照字段...
js批量给form表单赋值
xiaosa3134的专栏
04-19 4680
/** * 批量赋值 * @param obj */ function loadData(obj){    var key,value,tagName,type,arr;    for(x in obj){        key = x;        value = obj[x];        $("[name='"+key+"'],[name='"+key+"[]']")...
ajax回填表单获取json中的某个值
zq24zq的博客
12-16 2693
function erpValue(id) { //回调控制器中的方法            var url = __ctx + '/chongqing/erp/bookInfo/getResource.ht';     $.post(url,                          {Id:id},                     function(data
select提交之后回填值的问题
RT_0114的博客
11-09 4080
之前项目中用字典来查找回填，这么搞很好，但我不想在dict表 里面存储这个类型。怎么搞呢？经测试有效，见代码。 方式： <form:select id="uploadType" path="uploadType" class="form-control" style="width:120px;"> 自动 手动 说白了
textarea回填数据显示自适应高度
weixin_30425949的博客
12-26 488
queryTextArea(){ var textAll = document.getElementById('templaInner').querySelectorAll("textarea"); textAll.forEach(el=>{ var val = $(el).val(); val ...
jquery序列化及回填form数据
lime_的博客
04-24 1501
jquery序列化form 提交表单时取数大致有两种方式，1.用jquery找到所有值提交到后台，2.用工具自动序列化表单值。第一种代码量太大，所以使用第二种方式。 序列化 jquery序列化表单常用两种方式：serializeArray()、serialize() serializeArray() 方法通过序列化表单值来创建对象数组。 serialize()则序列化成字符串。 序列化后添加变...
jquery案例14——ajax、请求接口、处理接口返回数据
努力、拼搏、奋进
05-17 2921
一、图片请求 1.案例描述 利用jq中的ajax去请求接口，获取数据，并对数据进行渲染显示到页面上。 2.案例效果演示 说明：目前我只请求了4条数据。 3.案例局部代码 css代码： <style> .imgSrc img { width: 100px; height: 80px; object-fit: contain; } table { text-align: center; } &lt
jQuery表单元素动态增加删除特效代码
03-20
jQuery表单元素动态增加删除代码是一款基于addel.js插件实现的动态表单增删特效。
jQuery复制表单元素附源码分享效果演示
11-22
本文我们通过实例介绍一款简单的基于jQuery的元素复制插件，通过调用该插件轻松实现元素复制功能。 首先载入jQuery库文件和元素复制插件duplicateElement.min.js。 [removed][removed] [removed]</sc
jValidate 基于jQuery的表单验证插件
01-19
网上的各类表单验证插件的验证规则都是写在脚本里的，但我的插件的验证规则却是写在表单元素的属性里的。如下面的例子： 代码如下:<input name=”name” type=”text” id=”name” size=”30″ jvpattern=”^.+$...
jQuery复制移除表单元素代码.zip
07-11
jQuery复制移除表单元素代码基于jquery.1.7.2.min.js制作，可复制移除相同表单。
钢筋混凝土污水池及提升泵站施工方案.doc
05-03
课程设计污水处理
PHP基于Web的subversion用户管理系统(源代码+设计说明书).zip
05-03
PHP基于Web的subversion用户管理系统(源代码+设计说明书).zip
node-v12.22.10-linux-armv7l.tar.xz
05-03
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
The Experiment 3 of Engineering Electromagnetics.pdf
最新发布
05-03
The Experiment 3 of Engineering Electromagnetics.pdf
node-v12.11.0-darwin-x64.tar.xz
05-03
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
怎么 实现一个基于Jquery的表单验证插件
04-19
实现一个基于Jquery的表单验证插件，可以通过以下步骤： 1.创建一个包含所有验证规则的JSON对象，例如：{"required":true, "maxlength":10, "email":true} 2.使用Jquery选择器选中需要验证的表单元素 3.使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值