javascript - 在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

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

我有一种丑陋的解决方案，我遍历表单的子项并检查它们是否匹配各种键，然后设置值，但我真的不喜欢它。

我想要一种更简洁、通用的方法，它适用于任何形式(假设参数字符串具有所有正确的键)。

我正在使用原型(prototype) javascript 库，因此欢迎提出利用它的建议。

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

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，这很容易。首先，您可以使用 toQueryParams String 对象上的方法以获取每个参数都带有名称/值对的 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和 each迭代每个查询字符串参数并将匹配的表单输入(使用输入名称属性)设置为查询参数对象中的匹配值的方法。

编辑:请注意，您的表单元素不需要 id 属性，此解决方案也能正常工作。