使用jQuery存储复杂表单的状态
我有一个相当复杂的表单，其中有许多由用户填写的“步骤”。有些步骤(可以认为是表单片段)有默认选项，但单击“输入自定义值”时，它们会显示一组隐藏的字段，用户可以在其中输入信息。下面是一个例子
<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。这是我的任务。我想让用户能够保存表单的状态。因此，一旦用户填写了整个表单，为某些部分选择了平均默认值，并为其他部分输入了自定义值，用户就可以单击按钮并保存整个状态，以便稍后解冻。我在想，如果我可以将状态保存在可以序列化的对象中，我就可以将其保存在db表或其他持久性存储中。
用户可以稍后返回并重建整个先前会话。
我该怎么做呢？有getAttributes插件http://plugins.jquery.com/project/getAttributes，还有jQuery序列化方法，但我终生无法入门。请把我推向正确的方向。
回答 3
Stack Overflow用户
发布于 2011-02-09 04:07:24
这里有几个函数可以帮助你完成这个过程。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, select, 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"));Stack Overflow用户
发布于 2011-06-10 07:17:31
我会从使用dumbFormState jQuery plugin开始。
这个插件实际上会在你打字的时候自动保存东西，所以当它们回来的时候，它已经填好了，你不需要服务器端来做这件事。
在此之后，我将创建进一步的jQuery，以便在dumbFormState插件之后加载，然后显示/隐藏填充的区域。如果你在别人填写表单之前调用它，这是没有问题的，因为它将是空白的，并且你的逻辑不应该显示/隐藏任何空白的东西。
Stack Overflow用户
发布于 2010-08-08 08:35:42
我猜您正在寻找序列化form data的.serialize()。要做到这一点，您的input元素需要位于form tag plus中，所有这些元素都必须具有name属性。
var form1data = $('#form1').serialize();
alert(form1data);https://stackoverflow.com/questions/3432614
复制相似问题
腾讯云开发者
