很久之前,就寫了一個把 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>