在日常开发的过程中，难免会用到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. Linux学习笔记7——linux中的静态库和动态库

    一.静态库的编译 静态库的编译过程如下: 1.编译成目标文件 这里有一个可选项-static,调用格式:gcc -c -static 代码文件名.c 2.归档成静态库 A.归档的工具是ar工具,使用a ...

  2. Leetcode那点事儿

    1 .Two Sum 2.Add Two Numbers 3.Longest Substring Without Repeating Characters 7.Reverse Integer  26. ...

  3. vijosP1071 新年趣事之打牌

    vijosP1071 新年趣事之打牌 链接:https://vijos.org/p/1071 [思路] 01背包+路径输出. 用d[][]记录[][]可转移的数目,>=2则输出-1,0输出0,否 ...

  4. P1082丛林探险

    P1082丛林探险 描述 东非大裂谷中有一片神秘的丛林,是全世界探险家的乐园,著名黄皮肤探险家BB一直想去试试.正好我国科学家2005年4月将首次对东非大裂谷进行科考,BB决定随科考队去神秘丛林探险. ...

  5. HDU 1520 Anniversary party [树形DP]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1520 题目大意:给出n个带权点,他们的关系可以构成一棵树,问从中选出若干个不相邻的点可能得到的最大值为 ...

  6. spark-streaming-kafka包源码分析

    转载请注明原创地址 http://www.cnblogs.com/dongxiao-yang/p/5443789.html 最近由于使用sparkstreaming的同学需要对接到部门内部的的kafk ...

  7. Hashtable映射数据库字段

    package com.test; import java.sql.*; import java.util.ArrayList; import java.util.Hashtable; import ...

  8. 使用redis来实现分布式锁

    在实际的工作中,有部分的特定场景需要使用到分布式锁来进行跨服务器资源的统一调配.之前在一家医疗互联网公司,因为黄牛抢号等原因,造成同一个患者同一时段在同一个医生处,挂到了两个及以上的号,我对之前我司实 ...

  9. 【Android - MD】之TextInputLayout的使用

    TextInputLayout是Android 5.0新特性--Material Design中的一个布局控件,主要用来嵌套EditText,实现数据输入时的一些效果,如: 当输入框获取焦点时,输入提 ...

  10. Javascript触屏手势库-JTouch(更新V1.1)

    作者:痞子|时间:2013-05-21|分类目录:js,javascript,jquery教程|Tag标签: javascript.jTouch|阅读(857) 7 条评论 Javascript触屏手 ...