js 填充数据到表单

很久之前,就写了一个把 json 数据填充到表单的方法…当时是出于弹窗编辑数据的需要,于是干脆封装成一个方法.
今天发现,做搜索功能时,以 get 方式提交表单后,还得保持表单中的搜索条件不变.
当初是用服务器把 get 数据转成 json格式,然后传给 js, 但是遇到文本框name=”a[b]”这种数组形式的,就用不了,非得在服务器端再做处理.后面转念一想,也可以直接从浏览器地址栏上取查询字符串.再转成json就可以了.

说明,插件基于jquery,所以,要先引入jquery

<form  action="/index.php" method="get">

    <input type="text" name="Search[pn]">

    <select name="Search[status]">
        <option value="">=Status=</option>
        <option value="0">无效</option>
        <option value="1">有效</option>
    </select>

</form>

<script type="text/javascript">
$.fn.formEdit = function(data){

    if(typeof data != 'object'){
        var search = '';
        if(typeof data == 'undefined'){
            var data = {};
            search = decodeURIComponent(location.search).slice(1);
        }else{
            search = data;
            data = {};
        }
        var search = search.split('&');
        var row = [];
        for(var i in search){
            row = search[i].split('=');
            data[row[0]] = row[1];
        }
        //console.log(data);
    }

    this.each(function(){
        var input, name;
        if(data == null || data instanceof Array){
            this.reset(); return; 
        }
        for(var i = 0; i < this.length; i++){
            input = this.elements[i];
            //checkbox的name可能是name[]数组形式
            name = (input.type == "checkbox")? input.name.replace(/(.+)\[\]$/, "$1") : input.name;
            if(typeof data[name] == 'undefined') continue;
            switch(input.type){
                case "checkbox":
                    if(data[name] === ""){
                        input.checked = false;
                    }else{
                        input.checked = (data[name].indexOf(input.value) > -1)? true : false;
                    }
                    break;
                case "radio":
                    if(data[name] === ""){
                        input.checked = false;
                    }else if(input.value == data[name]){
                        input.checked = true;
                    }
                case "file" : $('img[src='+name+']').attr('src', data[name]);
                    break;
                default: input.value = data[name];
            }
        }
    });
    return this;
}

//传data值,当不传时,动取地址栏中的search 字符串
$('form:eq(1)').formEdit('r=test/index&Search[pn]=&Search[status]=1');

</script>