如何轻松填写表单域？答案

【问题标题】：How can I easily fill form fields?如何轻松填写表单域？
【发布时间】：2010-12-30 09:31:49
【问题描述】：

示例 ajax 表单

<form method="post">
  <input type="text" name="name" />
  <input type="text" name="email" />
  <select name="group">
    <option value="1">group 1</option>
    <option value="2">group 2</option>
  </select>
  <button type="submit">submit</button>
</form>

每次显示表单时都会发送一个 ajax 调用，并且服务器会返回一个 json 对象，例如

{"name":"john", "email": "john@some-domain.com", "group": 2}

我不想做繁琐的手动填写 json 数据的工作，例如

$('#myform').fillWith( json );

【问题讨论】：

标签： jquery forms plugins autofill

【解决方案1】：

您可以轻松构建一个简单的插件来做到这一点：

jQuery.fn.fillWith = function(input) {
  return this.each(function(){
    var form = this;
    $.each(input, function (key, value) {
      $(form).find('[name='+key+']').val(value);
    });
  });
};

您可能希望优化属性选择器，仅检查 input、select、textarea 元素，在此示例中，选择器正在寻找任何元素 (*[name=foo])。

您可能还需要添加一些代码来正确处理单选按钮。

使用您的标记检查示例here。

【讨论】：