动态form表单_动态设置form表单的元素值
2017-12-19 13:42:59  By: dwtedx

因为经常用到的功能,所以我想到封装一个函数,用起来更方便快捷。

先来看效果图如下:


这就相当于 ajax 返回的json, 元素是通过 name 来查找的, 其基本形式: name : value ,checkbox 比较特殊,它是多个并存,所以要 "选中" 它得通过值来查找, 值对上了,就把它"选中"

var data = {a:´aaaa´, b:´2´, ´c´:[1,2,4]}


当然, 还有清除数据的情况:

var data = {a:´´, b:´´, ´c´:´´}


像这样,设置为空值,就可以了。说到这里,是不是很好玩呀?ok,下面就是基于 jqery 写的代码:

<form id="form1" >
    <input type="text" name="a" />
    <br/>
    <input type="radio" name="b" value="1" checked />1
    <input type="radio" name="b" value="2" />2
    <input type="radio" name="b" value="3" />3
    <br/>
    <input type="checkbox" name="c[]" value="1" />a
    <input type="checkbox" name="c[]" value="2" />b
    <input type="checkbox" name="c[]"  value="3"/>c
    <input type="checkbox" name="c[]"  value="4"/>d
</form>
<script type="text/javascrip">
//编辑表单
$.fn.formEdit = function(data){
//data = {"text":"value", "checkbox":[1,2,4], "radio":"10"};

if(typeof data == "undefined"){
    this.reset();
    return this;
}
return this.each(function(){var input, name;
    for(var i = 0; i < this.length; i  ){
        input = this.elements[i];
        //修正checkbox
        if(input.type == "checkbox"){
            name = input.name.replace(/(. )[]$/, "$1");
        }else{
            name = input.name;
        }
    if(typeof 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;
            default: input.value = data[name];
        }
    }
})

};

data = {
    "a":"张三", 
    "b":[1,3,4],
    "c":"2",
};
$(´#form1´).formEdit(data);
</script>


若资源对你有帮助,浏览后有很大收获,不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力。

想获取DD博客最新代码,你可以扫描下方的二维码,关注DD博客微信公众号(ddblogs)。

或者你也可以关注我的新浪微博,了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间,可以对该博文进行评论,希望不吝赐教。

为保证及时回复,可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问,祝你生活愉快、工作顺心、欢迎常来逛逛。


快速评论


技术评论

    • 845224315@qq.com 2018-01-17 10:44:12  1 评  | 回复

      2018网赚新项目,抢先机--我的座右铭:做不到日赚万元,死不瞑目!一辈子只做好一件事! 1.2018年最有潜力的赚钱项目,目前红利期不要错过。 2.稳定,每天赚个500-1000左右,我已经持续了一个多月,不然我也教不了你。 3.正规项目,可以长期操作。真正想赚钱的我可以教你,你赚了钱再来拜师。 4.好项目经得起考验,绝对不是垃圾项目,说的再好,你不做也是枉然。 5.虽然我不是大师,但是我能带你月赚万元绝没问题,直接复制我的就OK,不懂手把手教。 做网赚,别想一步登天,不是每个人都能赚钱的。如果,你没有坚定的信念,还是老老实实去上 班吧! 想清楚了再加我的微信,我要的是你勇往向前的决心,微信sgvg6666 (写验证码126,加我必通过) 我的座右铭:做不到日赚万元,死不瞑目!一辈子只做好一件事!


DD记账
top
+