jquery获取form表单内容以及绑定数据到form表单

在日常开发的过程中，难免会用到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[0]]=otherSplitArray[1];
        });
    }
    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=0;i<checkboxObj.length;i++){
                    for(var j=0;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=0;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>

其他推荐文章链接：

JavaScript模式设计

JavaScript模式设计之单例模式

JavaScript模式设计之构造函数模式

jquery获取form表单内容以及绑定数据到form表单

jquery.formHelp.js插件

html测试代码

相关推荐