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:"[email protected]",
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>
