写了个jquery的自动填充form插件

最近发现每次做后台编辑数据的时候, 给表单设置默认值都很麻烦, 这次干脆写了一个jquery插件, 直接自动填充表单, 省去php一个一个的写, 这样代码可读性也好了很多.

jquery.autofill.js

  1. jQuery.fn.extend({
  2. autofill: function (data) {
  3. if (!data || !$.isPlainObject(data)) {
  4. return;
  5. }
  6. for (var name in data) {
  7. if ($.isArray(data[name])) {
  8. var field = $('[name="' + name + '[]"]', this);
  9. field.each(function () {
  10. if (data[name].indexOf($(this).val()) >= 0) {
  11. $(this).attr('checked', 'checked');
  12. }
  13. });
  14. } else {
  15. var field = $('[name="' + name + '"]', this);
  16. field.each(function () {
  17. switch ($(this).attr('type')) {
  18. case 'radio':
  19. if ($(this).val() === data[name].toString()) {
  20. $(this).attr('checked', 'checked');
  21. }
  22. break;
  23. default:
  24. $(this).val(data[name]);
  25. break;
  26. }
  27. });
  28. }
  29. }
  30. }
  31. });

使用方法 ./test.php

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
  7. </head>
  8. <body>
  9. <div class="container">
  10. <form action="?" method="post" id="form">
  11. 姓名: <input type="text" name="name" id="" />
  12. <br />
  13. 年龄: <input type="number" name="age" id="" />
  14. <br />
  15. 性别:
  16. <input type="radio" name="sex" value="1" id="" />
  17. <input type="radio" name="sex" value="0" id="" />
  18. <br />
  19. 省份:
  20. <select name="area" id="">
  21. <option value="-1">选择省份</option>
  22. <option value="shanghai">上海</option>
  23. <option value="beijing">北京</option>
  24. <option value="henan">河南</option>
  25. </select>
  26. <br />
  27. 爱好:
  28. <input type="checkbox" name="hobby[]" value="book" id="" /> 看书
  29. <input type="checkbox" name="hobby[]" value="coding" id="" /> 写代码
  30. <input type="checkbox" name="hobby[]" value="games" id="" /> 打游戏<br />
  31. 简介:
  32. <textarea name="content"></textarea>
  33. <br />
  34. <input type="submit" value="提交" />
  35. </form>
  36. <!-- 这里是数据 -->
  37. <div class="hidden" id="data">
  38. <?php
  39. $data = [
  40. 'name' => 'shuai',
  41. 'age' => '25',
  42. 'area' => 'henan',
  43. 'sex' => 0,
  44. 'hobby' => ['book', 'games'],
  45. 'content' => 'hello world',
  46. ];
  47. echo json_encode($data);
  48. ?>
  49. </div>
  50. </div>
  51. <script src="jquery.min.js" type="text/javascript"></script>
  52. <script src="jquery.autofill.js" type="text/javascript"></script>
  53. <script type="text/javascript">
  54. $(function () {
  55. var data = $.parseJSON($('#data').text());
  56. $('#form').autofill(data);
  57. });
  58. </script>
  59. </body>
  60. </html>

访问

文章不错, 赏你二两银子

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续努力!