使用jQuery来存储复杂表单的状态
我有一个相当复杂的forms，其中有许多“步骤”，由用户填写。 某些步骤（将它们视为表单段）具有默认选项，但在单击“输入自定义值”时，它们会显示一个隐藏的字段集，用户可以在其中输入信息。这是一个示例
Mode A Mode B Choose one of the above for applying average coefficient values of "a" or "b" to 100% of your product or enter custom values %a: coeff. a %b: coeff. b Enter custom values above or choose average values
有几个这样的段，例如，＃s1 ..＃s7。 这是我的任务。 我想让用户保存表单的状态。 因此，一旦用户填写了整个表单，选择某些段的平均默认值，并为其他段输入自定义值，用户就可以单击一个按钮并保存整个状态以便稍后解冻。 我在想，如果我可以将状态保存在我可以序列化的对象中，我可以将其保存在db表或其他持久存储中。
用户可以稍后返回并重新构建整个上一个会话。
我该怎么做呢？ 有getAttributes插件http://plugins.jquery.com/project/getAttributes ，并且有jQuery serialize方法，但我不能为我的生活开始。 请按正确的方向推动我。
以下是一些有助于此过程的function。 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, eg localStorage // ... // Restore form from string stringToForm(formString, $("#myForm"));
我将从使用dumbFormState jQuery插件开始 。
该插件实际上会在您输入时自动保存，因此当它们返回时，它已经再次填写，您不需要服务器端来执行此操作。
之后，我会在dumbFormState插件之后创建进一步的jQuery，然后显示/隐藏填充的区域。 如果你在有人填写表格之前打电话给你，这是没有问题的，因为它是空白的，你的逻辑不应该显示/隐藏任何空白的东西。
我想你正在寻找.serialize（） ，它序列化form data 。 为此，您的input元素需要位于form tag内，并且所有input元素都必须具有name属性。
var form1data = $('#form1').serialize(); alert(form1data);
您可能只想将非默认数据放入json中，然后通过post请求将其发送到要保存的服务器。
因此，一旦该人返回页面，您将自动查看是否已保存某些内容，您可以询问他们是否要使用它，或者从保存的数据中填充表单。
保存默认值会浪费带宽，因为您无论如何都不会从表单加载时更改它。
更新：
要将其保存为JSON，我认为将其构建为长字符串很简单，因为格式很简单，因此您只需将所有内容作为单个字符串发送即可。
您可能还想保存他们所在的舞台，或者在他们进入每个舞台时自动保存，这可能是更好的选择，以防他们的计算机崩溃他们不必再从头开始，但你可能希望通过复选框启用，以打开自动保存。