本文目录

jquery.formautofill 表单自动填充

🌙
手机阅读
本文目录结构

一个表单需要对多个项目赋值的时候,如果赋值,需要手动赋值,或者写一个循环;这样做虽然可以,但是会有很多重复的代码,而且效率低,不优雅;

通过 jquery.formautofill 这个插件,可以自动填充到输入框 / 选择项等的内;

填充方式有两种,一种是通过 name 值来填充,一种是通过 ID 来填充;

组装一个 JSON 格式的数据,

    //编辑抽奖信息;
    $page.on("click",".j-edit-prize",function(e){
        e.preventDefault();
        var sourcesDataObj=$(this).closest("tr").data();
        self.initPrizeInfo(sourcesDataObj);
    });

数据格式如:

    var data = {
        "name": "name_value",
        "email": "email@xxx.com",
        "lovejquery": "yes" //匹配的是value是yes的那个选择按钮
    }

然后 jquery 获取表单后,使用 autofill 方式即可;

    initPrizeInfo:function(dataObj){
        //初始化值
        $editPrizeDiaForm.autofill(dataObj);
    },

默认的这种方式是通过 name 值来查找的,

autofill 的参数:

    var options = {
        findbyname: true,//通过name来查找并赋值,如果是false,是通过ID的方式来查找
        restrict: true//是否限制在当前form内赋值,上下文是当前form;如果是false,上下文是整个文档;
    }
    initPrizeInfo:function(dataObj){
        //初始化值
        var options = { findbyname: true, restrict: true }
        $editPrizeDiaForm.autofill(dataObj,options );
    },

参考:

DEMO:http://labs.creative-area.net/jquery.formautofill/doc/
GitHub:https://github.com/creative-area/jQuery-form-autofill

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了