9

我正在寻找一种非常通用的方法来“填写”基于使用 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

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

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

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

我正在使用原型 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;
      }
    });
  });
}

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

4

5 回答 5

6

如果您使用 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和each方法迭代每个查询字符串参数，并将匹配的表单输入（使用输入名称属性）设置为查询参数对象中的匹配值。

编辑：请注意，您不需要在表单元素上具有 id 属性才能使此解决方案起作用。

于 2008-11-02T21:24:51.287 回答
3

试试这个：

Event.observe(window, 'load', function() {
  var loc = window.location.search.substr(1).split('&');

  loc.each(function(param) {
      param = param.split('=');
      key = param[0];
      val = param[1];

      $(key).value = val;
  });
});

上面的代码假定您为每个表单元素分配了 id 值和名称。它接受以下形式的参数：

?键=值&键=值

或者

?选项1=1&选项2=2

如果您想将其保留为元素的名称，请尝试代替上述内容：

Event.observe(window, 'load', function() {
  var loc = window.location.search.substr(1).split('&');

  loc.each(function(param) {
    param = param.split('=');
    key = param[0].split('_');

    type = key[0];
    key = key[1];
    val = param[1];

    $$(type + '[name="' + key + '"]').each(function(ele) {
      ele.value = val;
    });
});

此代码采用以下形式的参数：

?type_key=值&type_key=值

或者

?select_option1=1&select_option2=2
于 2008-11-02T20:32:34.387 回答
1

您说您已经在遍历元素并设置值。但是，也许这比你所拥有的更干净？

function setFormSelectValues(form, dataset) {
    var sel = form.getElementsByTagName("select");
    dataset.replace(/([^=&]+)=([^&]*)/g, function(match, name, value){
        for (var i = 0; i < sel.length; ++i) {
            if (sel[i].name == name) {
                sel[i].value = value;
            }
        }
    });                
}

如果需要，您可以将其调整为不仅仅是选择元素。

于 2008-11-02T20:09:26.087 回答
0

prototype.js中的三行代码：

$H(query.toQueryParams()).each(function(pair) {
    $("form")[pair.key].setValue(pair.value);
});
于 2008-11-12T13:29:06.360 回答
0

您可以使用formManager在 JavaScript 对象中获取表单数据。

于 2010-09-28T18:19:20.573 回答