我正在寻找一种真正通用的方法来使用 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
然后根据查询字符串中的选项选择正确的内容。
我有一种丑陋的解决方案,我遍历表单的子项并检查它们是否与各个键匹配,然后设置值,但我真的不喜欢它。
我想要一个清洁工generic这样做的方法适用于任何形式(假设参数字符串具有所有正确的键)。
我正在使用原型 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;
}
});
});
}
我觉得它仍然可以更快/更干净。
如果您使用 Prototype,这很容易。首先,您可以使用查询参数 http://prototypejs.org/api/string/toQueryParamsString 对象上的方法来获取每个参数的名称/值对的 Javascript 对象。
其次,您可以使用 Form.Elements.setValue 方法(似乎没有记录)将每个查询字符串值转换为实际的表单输入状态(例如,当查询字符串值为“on”时选中复选框)。使用 name.value=value 技术仅适用于文本和选择(一个,而不是多个)输入。使用原型方法添加了对复选框和选择(多个)输入的支持。
至于一个简单的函数来填充你所拥有的内容,这效果很好而且并不复杂。
function populateForm(queryString) {
var params = queryString.toQueryParams();
Object.keys(params).each(function(key) {
Form.Element.setValue($("someform")[key], params[key]);
});
}
这使用了对象.keys http://prototypejs.org/api/object/keys和each http://prototypejs.org/api/array/each方法来迭代每个查询字符串参数并将匹配的表单输入(使用输入名称属性)设置为查询参数对象中的匹配值。
Edit:请注意,您的表单元素不需要具有 id 属性才能使此解决方案发挥作用。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)