在日常开发的过程中，难免会用到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. Unity 的 unitypackage 的存放路径

    Windows,C:\Users\<username>\AppData\Roaming\Unity\Asset Store Mac OS X,~/Library/Unity/Asset S ...

  2. java基础 （六）面向对象（一）

    这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...

  3. mysql使用mysqldump导出数据出错

    mysqldump -hlocalhost -uroot -p123456 student_info jssypk  > c:/databackup.sql 导出表结构 mysqldump  - ...

  4. Download SymmetricDS Data Sync Software for Free

    Download SymmetricDS Data Sync Software for Free Download SymmetricDS

  5. python 3 处理HTTP 请求的包

    http http: https://docs.python.org/3/library/http.html http是一个包,里面含有多个模块:http.client,http.server,htt ...

  6. Grandpa's Estate - POJ 1228(稳定凸包)

    刚开始看这个题目不知道是什么东东,后面看了大神的题解才知道是稳定凸包问题,什么是稳定凸包呢?所谓稳定就是判断能不能在原有凸包上加点,得到一个更大的凸包,并且这个凸包包含原有凸包上的所有点.知道了这个东 ...

  7. 细谈Java

    重载:相同函数名,不同参数. 重写(覆写):父类和子类之间的,子类重写了父类的方法. java的多态:重载+覆写 1.      Main方法: 是public的,也是static,也是void的,参 ...

  8. C#中的线程(下)-多线程

    1.  单元模式和Windows Forms 单元模式线程是一个自动线程安全机制, 非常贴近于COM——Microsoft的遗留下的组件对象模型.尽管.NET最大地放弃摆脱了遗留下的模型,但很多时候它 ...

  9. sencha touch 框架的几种核心脚本文件之间的区别

    sencha-touch-debug.js      供开发时用sencha-touch.js   供发布时用sencha-touch-all.js All     供不能使用SDK构建应用程序时,将 ...

  10. git学习 #2：git基本操作

    本文出自   http://blog.csdn.net/shuangde800 ------------------------------------------------------------ ...