用javascript填写表单的通用方法

我正在寻找一种真正通用的方法，使用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>

---

但是我觉得它可能会更快/更干净。

你说你已经在检查元素并设置值了。然而，也许这比你拥有的更干净

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;
            }
        }
    });                
}

函数setFormSelectValues（表单，数据集）{
var sel=form.getElementsByTagName（“选择”）；
dataset.replace（/（[^=&]+）=（[^&]*）/g，函数（匹配，名称，值）{
对于（变量i=0；i

然后，您可以根据需要对其进行调整，而不仅仅是选择元素。

尝试以下方法：

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值和名称。它采用以下形式的参数：

?key=value&key=value 此代码采用以下形式的参数：

?type_key=value&type_key=value ？类型键=值和类型键=值 或

---

？选择_option1=1和选择_option2=2如果您使用的是原型，这很容易。首先，您可以使用String对象上的方法来获取一个Javascript对象，每个参数都有名称/值对

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

对于一个简单的函数来填充您所拥有的内容，它工作得很好，并不复杂

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

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

编辑：请注意，要使此解决方案正常工作，表单元素上不需要id属性。

中有三行代码：

---

使用.

可以在JavaScript对象中获取表单数据，在某种程度上比我所拥有的更干净，因为您以更好的方式获取键/值，但我希望得到更通用的东西。在我的示例中，我只使用了selects，但许多表单都有其他元素。+1我完全不知道该方法。这将是一个巨大的时间节省在未来。谢谢。最后把

文档改成了
$（formId）
，这正是我要找的。再次感谢！您可以通过使用Hash.each方法访问键值对来缩短代码：$H（queryString.toQueryParams（））.each（函数（对）{Form.Element.setValue（$（“someform”）[pair.key]，params[pair.value]）；}）；
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=value&type_key=value
?select_option1=1&select_option2=2
function populateForm(queryString) {
    var params = queryString.toQueryParams();
    Object.keys(params).each(function(key) {
        Form.Element.setValue($("someform")[key], params[key]);
    });
}

$H(query.toQueryParams()).each(function(pair) {
    $("form")[pair.key].setValue(pair.value);
});