jquery获取form表单内容以及绑定数据到form表单
在日常开发的过程中，难免会用到form表单，我们需要获取表单的数据保存到数据库，或者拿到后台的一串json数据，要将数据绑定到form表单上，这里我写了一个基于jquery的，formHelp插件，使用起来也很简单：
获取表单的数据：$("#formid").serializeJson();
绑定数据到表单：$("#formid").setForm(json);
jquery.formHelp.js插件
/**
* 将form里面的内容序列化成json
* 相同的checkbox用分号拼接起来
* @param {dom} 指定的选择器
* @param {obj} 需要拼接在后面的json对象
* @method serializeJson
* */
$.fn.serializeJson=function(otherString){
var serializeObj={},
array=this.serializeArray();
$(array).each(function(){
if(serializeObj[this.name]){
serializeObj[this.name]+=';'+this.value;
}else{
serializeObj[this.name]=this.value;
}
}); if(otherString!=undefined){
var otherArray = otherString.split(';');
$(otherArray).each(function(){
var otherSplitArray = this.split(':');
serializeObj[otherSplitArray[]]=otherSplitArray[];
});
}
return serializeObj;
}; /**
* 将josn对象赋值给form
* @param {dom} 指定的选择器
* @param {obj} 需要给form赋值的json对象
* @method serializeJson
* */
$.fn.setForm = function(jsonValue){
var obj = this;
$.each(jsonValue,function(name,ival){
var $oinput = obj.find("input[name="+name+"]");
if($oinput.attr("type")=="checkbox"){
if(ival !== null){
var checkboxObj = $("[name="+name+"]");
var checkArray = ival.split(";");
for(var i=;i<checkboxObj.length;i++){
for(var j=;j<checkArray.length;j++){
if(checkboxObj[i].value == checkArray[j]){
checkboxObj[i].click();
}
}
}
}
}
else if($oinput.attr("type")=="radio"){
$oinput.each(function(){
var radioObj = $("[name="+name+"]");
for(var i=;i<radioObj.length;i++){
if(radioObj[i].value == ival){
radioObj[i].click();
}
}
});
}
else if($oinput.attr("type")=="textarea"){
obj.find("[name="+name+"]").html(ival);
}
else{
obj.find("[name="+name+"]").val(ival);
}
})
}
html测试代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQueryFormHelp练习</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="jquery.formHelp.js"></script>
<script type="text/javascript"> $(function () {
$("#form").setForm({a: '张三家的附近可考虑将', b: '王五', c: '王五', d: 'nishi yaldjlkfjal ',e:7,f:'8;10',i:'王'});
});
function submitForm(){
console.log($("#form").serializeJson('id:12;name:13;'));
}
</script>
</head> <body>
<form id="form">
<div><input type="text" name="a" /></div>
<div><input type="text" name="b" id="b" /></div>
<div><input type="hidden" name="c" id="c" /></div>
<div>
<textarea name="d" rows="8" cols="40"></textarea>
<input type="checkbox" name="f" value="10"/>
</div>
<div><select name="e">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select></div>
<div>
<input type="checkbox" name="f" value="8" />
<input type="checkbox" name="f" value="9"/>
</div>
<div>
<input name="i" type="radio" value="王" />王
<input name="i" type="radio" value="小" />小
</div>
<div>
<input type="button" name="g" value="Submit" id="g" onclick="submitForm()"/>
</div>
</form> </body>
</html>
其他推荐文章链接：
jquery获取form表单内容以及绑定数据到form表单的更多相关文章
- jquery获取文本框的内容
使用jquery获取文本框的内容有以下几种: 1.根据ID取值(id属性): // javascript <script type="text/javascript"> ...
- MySQL实验1： 新建一个名为 library 的数据库，包含 book、reader 两张表，根据自己的理解安排表的内容并插入数据。
数据表(table)简称表,它是数据库最重要的组成部分之一.数据库只是一个框架,表才是实质内容. 实验: 新建一个名为 library的数据库,包含 book.reader两张表,根据自己的理解安排表 ...
- MySQL将表a中查询的数据插入到表b中
MySQL将表a中查询的数据插入到表b中 假设表b存在 insert into b select * from a; 假设表b不存在 create table b as select * from a ...
- sqlserver 复制表结构（可以含有数据 或 只要表结构）
sqlserver 复制表结构(可以含有数据 或 只要表结构) SELECT * INTO bb FROM aa(NOLOCK) WHERE 1=0
- [oldboy-django][2深入django]form表单clean_xx, clean完成数据验证+ form错误信息
form后台生成form里面的Input标签,以及设置Input的属性 # 需求 后台生成form里面的input标签,并设置input标签的属性, class RegisterForm(Form): ...
- jquery配合.NET实现点击指定绑定数据并且能够一键下载
最近在做培训管理系统中遇到一个问题,需求需点击绑定的数据,将指定的附件下载下来,并且是批量下载(绑定的数据非datagrid,后台拼接的绑定). 效果图如下: 大体思路: 1.jquery得到选中的绑 ...
- jQuery 获取不到 kindeditor 内容 的解决方法
错误写法 : var content = $('#Content').val(); 正确写法: var content = $(document.getElementsByTagName(" ...
- js和jquery获取当前元素的内容
html代码 <div>测试文本</div>js:div.innerHTMLjQuery:div.html()
- 用jquery获取单选按钮选中的内容 和 获取select下拉列表选中的值
1.<label><input name='reason' type='radio' value='您的评论内容涉嫌谣言' />您的评论内容涉嫌谣言</label> ...
随机推荐
- js 中 json对象 与 json字符串 间相互转换
在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键 JSON字符串: var str1 = '{ " ...
- JavaScript高级程序设计12.pdf
第六章 面向对象的程序设计 ECMA中有两种属性:数据属性和访问器属性 数据属性的特性 [[Configurable]] 表示是否通过delete删除属性,是否重新定义属性,是否能把属性修改为访问器属 ...
- cas 单点登录配置
服务端配置 cas是个好东西,很灵活很好用,但是配置起来很麻烦 cas官方网站 http://downloads.jasig.org/ 下载服务端 CAS Server 3.3.3 Final 1.将 ...
- oracle空表导不出来
在oracle 11g r2中,使用exp有时候会导不出空的表,原因是这些表没有分配空间,手工分配空间即可导出. ----查询当前用户下的所有空表: select table_name from us ...
- php 判断数组相等 数组运算符介绍
如何判断两个数组相等呢?其实很简单,用 == 或者 === 就可以了 php手册里说明如下, 例子 名称 结果 $a + $b 联合 $a 和 $b 的联合. $a == $b 相等 如果 $a 和 ...
- iOS-#ifdef DEBUG代码块介绍
iOS-#ifdef DEBUG宏定义介绍 一.#ifdef DEBUG代码块 #ifdef DEBUG // Debug 模式的代码... #else // Release 模式的代码... #en ...
- ARCGIS二维三维平移
private void glZoomPan() { ESRI.ArcGIS.SystemUI.ICommand com = new ControlsGlobePanTool(); com.OnCre ...
- [转] 考验你的JavaScript底细
http://sentsin.com/ 尽管今日的JavaScript已经突飞猛进,但JS的许多特性仍然保留,以下题目并不是有意设坑,许多地方将验证你的JS底细,如果错了一半,请别告诉我你从事前端. ...
- [转] CSS transition
https://css-tricks.com/almanac/properties/t/transition/ The transition property is a shorthand prope ...
- Some code changes cannot be hot swapped into a running virtual machine,
翻译一下:不能热交换到运行虚拟机,一些代码变化不能热交换到运行虚拟机,如更改名称或介绍的方法错误运行代码.解决方法:增加.删除类文件或者在一个类中增加.删除方法时,是不能够热部署到服务上的.这时候需要 ...