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> ...
随机推荐
- 局域网内通过UDP协议进行传输接受数据——AsyncUdpSocket
在相同的局域网内,可以通过Udp协议进行数据的传输和接收,Udp协议与Http协议不同,Udp更加方便快捷,省去了很多步骤,但是也有很多传输问题,在局域网内小范围传输数据时Udp还是非常能够胜任的. ...
- ITU-R BT.656 协议
ITU-R BT.601和ITU-R BT.656国际电信联盟(International Telecommunication Union)无线通信部门(ITU-R)制定的标准.严格来说,ITU-R ...
- ubuntu设置WPA2-PSK的wifi热点(AP)——hostapd+dhcpd
在ubuntu 12.04中,默认可以设置的wifi热点是只能用WEP加密,毫无疑问,这样的加密方式,安全性低,现在可以在10几秒的时间内破解,并且只能添加ad-hoc模式的热点,不支持添加AP模式, ...
- C# 实现关闭按钮隐藏窗体而不退出
private void OpenNewMxdFrm_FormClosing(object sender, FormClosingEventArgs e) { e.Cancel = true; thi ...
- disconf实践(一)
公司目前的应用基本采用分布式部署,通过F5进行集群管理.分布式应用带来的好处是,随着流量的增加,可以快速扩展应用节点,分摊压力.分布式也会带来一定的挑战,譬如配置文件管理.如果某个配置要修改,那么所有 ...
- php中传值与传引用的区别。什么时候传值什么时候传引用？
值传递: 函数范围内对值的任何改变在函数外部都会被忽略; 引用传递: 函数范围内对值的任何改变在函数外部也能反映出这些修改: 优缺点:按值传递时,php必须复制值.特别是对于大型的字符串和对象来说 ...
- winform 解决界面闪动、提升加载速度 分类： WinForm 2015-02-03 16:34 161人阅读 评论(0) 收藏
说明: 从一个技术交流群里获得,经验证效果不错. //作用 加快界面加载 protected override CreateParams CreateParams { ...
- 用ChooseALicense帮自己选一个开源license，然后用AddALicense给自己的github自动加上license文件
在我之前的一篇博客里面介绍过tl;drLegal ——开源软件license的搜索引擎,可以很方便的查询各种license,并且给出了很简洁的解释.今天又发现了另外一个帮助你选择你的开源软件licen ...
- nrf51822蓝牙芯片ble_app_proximity程序总结
近期由于钥匙的事情,研究了下官方自带的ble_app_proximity程序,事实上就是跟防丢有关系的程序. 同一时候也发现了看nordic程序的一些门道,主要还是看协议栈里面的一些service,首 ...
- GDB调试总结__1
该博客旨在分享IT技术心得和实际工作中遇到问题的解决方法,下面是新浪博客地址http://blog.sina.com.cn/qianyumolu,则为分享经济.行业趋势.心灵文章等,有兴趣的朋友能够踩 ...