我有一个非常复杂的表单,其中包含许多“步骤”,由用户填写.一些步骤(将它们视为表单段)具有默认选项,但是单击“输入自定义值”时,它们将显示用户可以输入信息的隐藏字段集.这里是一个示例
<div id="#s1_normal"> <input type="radio" name="mode" value="a"> Mode A <input type="radio" name="mode" value="b"> Mode B Choose one of the above for applying average coefficient values of "a" or "b" to 100% of your product or <a href="#" onclick="toggleCustom('s1');">enter custom values</a> </div> <div id="#s1_custom"> %a: <input type="text" name="perc_a"> coeff. a <input type="text" name="coeff_a"> %b: <input type="text" name="perc_b"> coeff. b <input type="text" name="coeff_b"> Enter custom values above or <a href="#" onclick="toggleCustom('s1');">choose average values</a>
有几个这样的段,例如#s1 ..#s7.这是我的任务我想让用户保存窗体的状态.因此,一旦用户填写了整个表单,选择某些细分的平均默认值,然后为其他段输入自定义值,用户可以点击一个按钮,并保存整个状态以供以后解冻.我想,如果我可以将状态保存在可以序列化的对象中,我可以将其保存在数据库表或其他持久性存储中.
用户可以稍后回来,重新构建整个上一个会话.
我该如何做？有一个getAttributes插件http://plugins.jquery.com/project/getAttributes,还有jQuery serialize方法,但是我不能为我的生活开始.请推动我正确的方向.
解决方法
这里有几个功能来帮助这个过程. formToString将一个表单作为一个字符串进行序列化,而stringToForm则反过来：
function formToString(filledForm) {
formObject = new Object
filledForm.find("input,select,textarea").each(function() {
if (this.id) {
elem = $(this);
if (elem.attr("type") == 'checkBox' || elem.attr("type") == 'radio') {
formObject[this.id] = elem.attr("checked");
} else {
formObject[this.id] = elem.val();
}
}
});
formString = JSON.stringify(formObject);
return formString;
}
function stringToForm(formString,unfilledForm) {
formObject = JSON.parse(formString);
unfilledForm.find("input,textarea").each(function() {
if (this.id) {
id = this.id;
elem = $(this);
if (elem.attr("type") == "checkBox" || elem.attr("type") == "radio" ) {
elem.attr("checked",formObject[id]);
} else {
elem.val(formObject[id]);
}
}
});
}
用法：
// Convert form to string
var formString = formToString($("#myForm"));
// Save string somewhere,e.g. localStorage
// ...
// Restore form from string
stringToForm(formString,$("#myForm"));
