在JavaScript中填写表格的通用方法 [英] Generic way to fill out a form in javascript

问题描述

我正在寻找一种真正通用的方法来使用javascript根据参数字符串填写"表单.

I'm looking for a really generic way to "fill out" a form based on a parameter string using javascript.

例如，如果我有这种形式:

for example, if i have this form:

<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

I'd like to be able to take a param string like this: option1=2&option2=1

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

And then have the correct things selected based on the options in the query string.

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

I have a sort of ugly solution where I go through children of the form and check if they match the various keys, then set the values, but I really don't like it.

我想要一种更清洁，通用的方法，该方法适用于任何形式(假设param字符串具有所有正确的键).

I'd like a cleaner, generic way of doing it that would work for any form (assuming the param string had all the right keys).

我正在使用原型javascript库，因此欢迎提出建议以利用它.

I'm using the prototype javascript library, so I'd welcome suggestions that take advantage of it.

这是我到目前为止所想的(使用Form.getElements(form)的原型)

this is what I've come up with so far (using prototype for 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;
      }
    });
  });
}

我觉得它仍然可以更快/更干净.

I feel that it could still be faster/cleaner however.

推荐答案

如果您使用的是原型，这很容易.首先，您可以在String对象上使用 toQueryParams 方法来获取名称为/的Javascript对象每个参数的值对.

If you're using Prototype, this is easy. First, you can use the toQueryParams method on the String object to get a Javascript object with name/value pairs for each parameter.

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

Second, you can use the Form.Elements.setValue method (doesn't seem to be documented) to translate each query string value to an actual form input state (e.g. check a checkbox when the query string value is "on"). Using the name.value=value technique only works for text and select (one, not many) inputs. Using the Prototype method adds support for checkbox and select (multiple) inputs.

对于一个简单的函数来填充您拥有的东西，它可以很好地工作，并且并不复杂.

As for a simple function to populate what you have, this works well and it isn't complicated.

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

这使用 Object.keys 和

This uses the Object.keys and the each methods to iterate over each query string parameter and set the matching form input (using the input name attribute) to the matching value in the query params object.

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

Note that you do not need to have id attributes on your form elements for this solution to work.

这篇关于在JavaScript中填写表格的通用方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！