在javascript中填写表单的通用方法

Question

我正在寻找一种非常通用的方法来使用javascript"填写"基于参数字符串的表单.

例如,如果我有这个表格:

<form id="someform">
  <select name="option1">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <select name="option2">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
</form>

我希望能够像这样采用一个参数字符串: option1=2&option2=1

然后根据查询字符串中的选项选择正确的内容.

我有一个丑陋的解决方案,我通过表格中的孩子检查它们是否匹配各种键,然后设置值,但我真的不喜欢它.

我想要一种更干净,通用的方法,可以适用于任何形式(假设param字符串具有所有正确的键).

我正在使用原型javascript库,所以我欢迎利用它的建议.

编辑:这是我到目前为止提出的(使用原型Form.getElements(form))

function setFormOptions(formId, params) {
  params = params.split('&');
  params.each(function(pair) {
    pair = pair.split('=');
    var key = pair[0];
    var val = pair[1];
    Form.getElements(form).each(function(element) {
      if(element.name == key) {
        element.value = val;
      }
    });
  });
}

我觉得它仍然可以更快/更清洁.

Answer 1

如果您使用Prototype,这很容易.首先,您可以在String对象上使用toQueryParams方法来获取具有每个参数的名称/值对的Javascript对象.

其次,您可以使用Form.Elements.setValue方法(似乎没有记录)将每个查询字符串值转换为实际的表单输入状态(例如,当查询字符串值为"on"时选中一个复选框).使用name.value = value技术仅适用于文本和选择(一个,不是很多)输入.使用Prototype方法添加了对复选框和选择(多个)输入的支持.

至于填充你所拥有的一个简单的功能,这很好用,并不复杂.

function populateForm(queryString) {
    var params = queryString.toQueryParams();
    Object.keys(params).each(function(key) {
        Form.Element.setValue($("someform")[key], params[key]);
    });
}

这使用Object.keys和每个方法迭代每个查询字符串参数,并将匹配的表单输入(使用输入名称属性)设置为查询参数对象中的匹配值.

编辑:请注意,您不需要在表单元素上具有id属性,以使此解决方案起作用.