ajax無刷新方式對form表單進行賦值!

/**
 * 把json數據填充到from表單中
 */
<form id="editForm" action="user.php">
    用戶名:<input type="text" name="usrname" /><br/>
    地址:<input type="text" name="address" /><br/>
    性別:<input type="radio" name="sex" value="0" />&nbsp;
     <input type="radio" name="sex" value="1" /><br/> 愛好:<input type="checkbox" name="hobby[]" value="sing" />唱歌&nbsp; <input type="checkbox" name="hobby[]" value="code" />寫代碼&nbsp; <input type="checkbox" name="hobby[]" value="trance" />發呆
</form>

如下是JS方法用於對form表單進行賦值(通用方法)php

$.fn.formEdit = function(data){
    return this.each(function(){
        var input, name;
        if(data == null){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(data[name] == undefined) continue;
            switch(input.type){
                case "checkbox":
                    if(data[name] == ""){
                        input.checked = false;
                    }else{
                        //數組查找元素
                        if(data[name].indexOf(input.value) > -1){
                            input.checked = true;
                        }else{
                            input.checked = false;
                        }
                    }
                break;
                case "radio":
                    if(data[name] == ""){
                        input.checked = false;
                    }else if(input.value == data[name]){
                        input.checked = true;
                    }
                break;
                case "button": break;
                default: input.value = data[name];
            }
        }
    });
};

調用方式:json

$json = { "usrname":"張三", "address":"湖北鍾祥", "sex": "1", "hobby":["sing", "trance"]};

$('#editForm').formEdit($json);數組

調用代碼解釋說明:this

$(form表單).formEdit(json數據);
json數聽說明:基本格式{inputname: value}, 具體類型{"text":"aaa", "checkbox":[1,2,3], "radio":"10"}
spa

相關文章
相關標籤/搜索