在日常开发的过程中，难免会用到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表单的更多相关文章

  1. jquery获取文本框的内容

    使用jquery获取文本框的内容有以下几种: 1.根据ID取值(id属性): // javascript <script type="text/javascript"> ...

  2. MySQL实验1： 新建一个名为 library 的数据库，包含 book、reader 两张表，根据自己的理解安排表的内容并插入数据。

    数据表(table)简称表,它是数据库最重要的组成部分之一.数据库只是一个框架,表才是实质内容. 实验: 新建一个名为 library的数据库,包含 book.reader两张表,根据自己的理解安排表 ...

  3. MySQL将表a中查询的数据插入到表b中

    MySQL将表a中查询的数据插入到表b中 假设表b存在 insert into b select * from a; 假设表b不存在 create table b as select * from a ...

  4. sqlserver 复制表结构（可以含有数据 或 只要表结构）

    sqlserver 复制表结构(可以含有数据 或 只要表结构) SELECT * INTO bb FROM aa(NOLOCK) WHERE 1=0

  5. [oldboy-django][2深入django]form表单clean_xx, clean完成数据验证+ form错误信息

    form后台生成form里面的Input标签,以及设置Input的属性 # 需求 后台生成form里面的input标签,并设置input标签的属性, class RegisterForm(Form): ...

  6. jquery配合.NET实现点击指定绑定数据并且能够一键下载

    最近在做培训管理系统中遇到一个问题,需求需点击绑定的数据,将指定的附件下载下来,并且是批量下载(绑定的数据非datagrid,后台拼接的绑定). 效果图如下: 大体思路: 1.jquery得到选中的绑 ...

  7. jQuery 获取不到 kindeditor 内容 的解决方法

    错误写法 :  var content = $('#Content').val(); 正确写法: var content = $(document.getElementsByTagName(" ...

  8. js和jquery获取当前元素的内容

    html代码 <div>测试文本</div>js:div.innerHTMLjQuery:div.html()

  9. 用jquery获取单选按钮选中的内容 和 获取select下拉列表选中的值

    1.<label><input name='reason' type='radio' value='您的评论内容涉嫌谣言' />您的评论内容涉嫌谣言</label> ...

随机推荐

  1. Unity3d 超级采样抗锯齿 Super Sampling Anti-Aliasing

    Super Sampling Anti-AliasingSSAA算是在众多抗锯齿算法中比较昂贵的一种了,年代也比较久远,但是方法比较简单,主要概括为两步1.    查找边缘2.    模糊边缘这是一种 ...

  2. [转]关于strtok和strtok_r函数的深度研究

    在linux环境下,字符串分割的函数中,大家比较常用的是strtok函数,这个函数用处很大,但也有一些问题,以下将深度挖掘一下这个函数的用法,原理,实现,其次,该函数是不可再入函数,但是在linux ...

  3. 《A First Course in Probability》-chaper5-连续型随机变量-随机变量函数的期望

    在关于离散型随机变量函数的期望的讨论中,我们很容易就得到了如下的等式: 那么推广到连续型随机变量,是否也存在类似的规律呢? 即对于连续型随机变量函数的期望,有: 这里给出一个局部的证明过程,完整的证明 ...

  4. SRM 386(1-250pt)

    DIV1 250pt 题意:题意很难翻译....其实就是一个暴力...在看到有一个限制条件的范围为1-10的时候就该想到是暴力,我却半天没想到.... tag:brute-force // BEGIN ...

  5. 通过例子学python（2.2）

    2.2 通用序列操作 #2.2 通用序列操作 #所有序列类型都可以进行的操作:索引indexing,分片sliceing,加adding,乘multiplying,成员资格, #计算序列长度,找出最大 ...

  6. Django教程：第一个Django应用程序(4)

    Django教程:第一个Django应用程序(4) 2013-10-09 磁针石 #承接软件自动化实施与培训等gtalk:ouyangchongwu#gmail.comqq 37391319 #博客: ...

  7. SQL-LINQ-Lambda语法对照

    SQL LINQ Lambda SELECT *FROM HumanResources.Employee from e in Employees select e Employees .Select ...

  8. sdut-2725-The Urge to Merge-状压DP

    把数组竖起来,从上往下走. 如果当前位置是竖着乘的,那么第一个点标记为1.否则标记为0. 样例最终的状态为: 0 0 1 0 1 0 1 0 0 0 0 0 #include<iostream& ...

  9. java的学习路线

     首先是培养兴趣.先开始学习HTML知识.也就是做网页,从这里开始比较简单,就是几个标签单词需要记住.  接着开始学习CSS,这里开始不要学习非常多,只要能作出简单类似hao123之类的静态网页就已经 ...

  10. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...