JS实现Form表单渲染

最新推荐文章于 2023-03-15 22:15:58 发布

黑胡子大叔的小屋

最新推荐文章于 2023-03-15 22:15:58 发布

阅读量1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lzl980111/article/details/114028969

版权

前端专栏收录该内容

75 篇文章 0 订阅

订阅专栏

JS实现Form表单渲染

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery.min.js"></script>

</head>
<body>
<form id="formDialog" class="uk-form" method="post" action="./js.json">
    <div>
        <label>用户名</label>
        <input name="loginName" field="loginName" type="text" placeholder="输入">
    </div>

    <div>
        <label class="uk-width-1-6">姓名</label>
        <input name="name" field="name" type="text" placeholder="输入">
    </div>
    <div field="type">
        <label><input type="radio" name="type" value="0">电话</label>
        <label><input type="radio" name="type" value="1">门诊</label>
        <label><input type="radio" name="type" value="2">微信</label>
        <label><input type="radio" name="type" value="3">电子邮件</label>
        <label><input type="radio" name="type" value="4">其他</label>
    </div>
    <div>
        <label class="uk-width-1-6">性别</label>
        <select name="sex" field="sex">
            <option value="1">男</option>
            <option value="0">女</option>
        </select>
    </div>
    <div>
        <label>出生日期</label>
        <input name="birthday" placeholder="输入" type="text" field="birthday">
    </div>

    <div>
        <label>电话</label>
        <input name="phone" type="text" placeholder="输入" field="phone">
    </div>

    <div>
        <label>email</label>
        <input name="email" field="email" type="text" placeholder="输入">
    </div>

    <input type="submit" value="登录"/>
    <input type="button" id="button" value="渲染" onclick="test()"/>
</form>
<script>
    function test(){
        console.log("In test()")
        var data = {
            loginName:"name1",
            name:"name2",
            sex:0,
            type:2,
            email:"123@163.com",
            birthday:"2017-01-01",
            phone:"1234567890"
        }
        applyDrawing(data);
    }
    function applyDrawing(data) {
        console.log("In applyDrawing()")
        console.log(data);
        var field = $("#formDialog [field]");
        field.each(function () {
            var value = data[$(this).attr("field")];
            $(this).val(value);
        });
        if (field.find('input[type="radio"]')) {
            field.find('input[type="radio"]').filter("[value='" + data.type + "']").attr("checked", true);
        }
    }
</script>
</body>
</html>

在这里插入图片描述