写了个jquery的自动填充form插件
最近发现每次做后台编辑数据的时候, 给表单设置默认值都很麻烦, 这次干脆写了一个jquery插件, 直接自动填充表单, 省去php一个一个的写, 这样代码可读性也好了很多.
jquery.autofill.js
jQuery.fn.extend({
autofill: function (data) {
if (!data || !$.isPlainObject(data)) {
return;
}
for (var name in data) {
if ($.isArray(data[name])) {
var field = $('[name="' + name + '[]"]', this);
field.each(function () {
if (data[name].indexOf($(this).val()) >= 0) {
$(this).attr('checked', 'checked');
}
});
} else {
var field = $('[name="' + name + '"]', this);
field.each(function () {
switch ($(this).attr('type')) {
case 'radio':
if ($(this).val() === data[name].toString()) {
$(this).attr('checked', 'checked');
}
break;
default:
$(this).val(data[name]);
break;
}
});
}
}
}
});
使用方法 ./test.php
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
<form action="?" method="post" id="form">
姓名: <input type="text" name="name" id="" />
<br />
年龄: <input type="number" name="age" id="" />
<br />
性别:
<input type="radio" name="sex" value="1" id="" /> 男
<input type="radio" name="sex" value="0" id="" /> 女
<br />
省份:
<select name="area" id="">
<option value="-1">选择省份</option>
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="henan">河南</option>
</select>
<br />
爱好:
<input type="checkbox" name="hobby[]" value="book" id="" /> 看书
<input type="checkbox" name="hobby[]" value="coding" id="" /> 写代码
<input type="checkbox" name="hobby[]" value="games" id="" /> 打游戏<br />
简介:
<textarea name="content"></textarea>
<br />
<input type="submit" value="提交" />
</form>
<!-- 这里是数据 -->
<div class="hidden" id="data">
<?php
$data = [
'name' => 'shuai',
'age' => '25',
'area' => 'henan',
'sex' => 0,
'hobby' => ['book', 'games'],
'content' => 'hello world',
];
echo json_encode($data);
?>
</div>
</div>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.autofill.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var data = $.parseJSON($('#data').text());
$('#form').autofill(data);
});
</script>
</body>
</html>
访问
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续努力!