在日常开发的过程中，难免会用到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. c语言中static的语义

    1.static变量: 1).局部 a.静态局部变量在函数内定义,生存期为整个源程序,但作用域与自动变量相同,只能在定义该变量的函数内使用.退出该函数后, 尽管该变量还继续存在,但不能使用它. b.对 ...

  2. Apache Mesos_百度百科

    Apache Mesos_百度百科 Apache Mesos

  3. Spark RDD概念学习系列之rdd的依赖关系彻底解密（十九）

    本期内容: 1.RDD依赖关系的本质内幕 2.依赖关系下的数据流视图 3.经典的RDD依赖关系解析 4.RDD依赖关系源码内幕 1.RDD依赖关系的本质内幕 由于RDD是粗粒度的操作数据集,每个Tra ...

  4. 层层递进Struts1（七）详解DispatchAction

    通过前面几篇博客,不知道大家有没有发现这个问题,虽然现在可以灵活控制跳转了,但是Action的数量还是比较多,如何既能保证跳转灵活,还能减少Action的数量?这就是我们这篇博客所说的Dispatch ...

  5. python 写的http后台弱口令爆破工具

    今天来弄一个后台破解的Python小程序,哈哈,直接上代码吧,都有注释~~ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...

  6. Struts2配置文件讲解

    解决在断网环境下,配置文件无提示的问题我们可以看到Struts.xml在断网的情况下,前面有一个叹号,这时,我们按alt+/ 没有提示,这是因为” http://struts.apache.org/d ...

  7. android布局之线性布局

    LinearLayout 线性布局有两种,分别是水平线性布局和垂直线性布局,LinearLayout属性中android:orientation为设置线性布局当其="vertical&quo ...

  8. Android教程：ImageView 设置图片

    Android doc中是这样描述的: public void setImageResource (int resId) 这是其中的一个方法,参数resld是这样: ImageView.setImag ...

  9. [置顶] 基于视频采集卡驱动的错误修改CX26828

    基于视频采集卡驱动的错误修改CX26828 1. 设置root密码 command:sudo passwd root 2.查看系统状态 输入命令:lsmod root@ubuntu:/home/yu# ...

  10. Android 微信SDK分享功能中的最全过程步骤分析

    在前面有一章已经分析过怎么用官方的demo分享微信信息了,在这里我就不再多说,其中关于在自己应用分享说得很简单,本文作者也是经过一番折腾才弄成功,为了以后让大家都少走弯路,决定在这里从头到尾介绍怎么在 ...