在日常开发的过程中，难免会用到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. 把测试app打包成ipa文件

    我终于把我的程序放到我的touch上了,其实把app放到touch上还有很多办法,这篇教程是主要讲怎么把app注册了,然后打包成一个ipa文件的. 先上官方文档:https://developer.a ...

  2. 介绍两个Eclipse插件： Implementors & Call Hierarchy

    介绍两个Eclipse插件: Implementors & Call Hierarchy 本文介绍两个在Eclipse调试与跟踪过程中的两个实用插件 他们都可以在 http://eclipse ...

  3. nyoj 710 外星人的供给站【贪心区间选点】

    外星人的供给站 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 外星人指的是地球以外的智慧生命.外星人长的是不是与地球上的人一样并不重要,但起码应该符合我们目前对生命 ...

  4. disconf实践(一)

    公司目前的应用基本采用分布式部署,通过F5进行集群管理.分布式应用带来的好处是,随着流量的增加,可以快速扩展应用节点,分摊压力.分布式也会带来一定的挑战,譬如配置文件管理.如果某个配置要修改,那么所有 ...

  5. 关于用jQuery知识来实现优酷首页轮播图！

    ▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...

  6. Media Queries 自适应布局展示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. java中的上转型对象

    1. 定义 如果B类是A类的子类或间接子类,当用B类创建对象b并将这个对象b的引用赋给A类对象a时,如: A a;a = new B();ORA a;B b = new B();a = b; 通俗的说 ...

  8. SVN太旧,要更新问题

    同步或者提交的时候出现问题提示 The working copy needs to be upgradedsvn: Working copy 'E:\JAVA\Workspaces\uhr' is t ...

  9. visual studio 添加链接文件

    本文转载http://blog.163.com/zhongpenghua@yeah/blog/static/87727415201282432345613/   那个有个箭头的文件就是链接文件了,添加 ...

  10. 海思android4.4 SDK编译Latin输入法

    原来的HiSTBAndroidV500R001C01SPC020\device\hisilicon\bigfish\packages\apps\HiLatinIME\Android.mk内容例如以下: ...