首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用jQuery存储复杂表单的状态

使用jQuery存储复杂表单的状态
EN

Stack Overflow用户
提问于 2010-08-08 08:30:10
回答 3查看 20.1K关注 0票数 20

我有一个相当复杂的表单,其中有许多由用户填写的“步骤”。有些步骤(可以认为是表单片段)有默认选项,但单击“输入自定义值”时,它们会显示一组隐藏的字段,用户可以在其中输入信息。下面是一个例子

代码语言:javascript
复制
<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序列化方法,但我终生无法入门。请把我推向正确的方向。

EN

回答 3

Stack Overflow用户

发布于 2011-02-09 04:07:24

这里有几个函数可以帮助你完成这个过程。formToString将表单序列化为字符串,而stringToForm则相反:

代码语言:javascript
复制
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]);
            }
        }
    });
}

用法:

代码语言:javascript
复制
// Convert form to string
var formString = formToString($("#myForm"));
// Save string somewhere, e.g. localStorage
// ...

// Restore form from string
stringToForm(formString, $("#myForm"));
票数 25
EN

Stack Overflow用户

发布于 2011-06-10 07:17:31

我会从使用dumbFormState jQuery plugin开始。

这个插件实际上会在你打字的时候自动保存东西,所以当它们回来的时候,它已经填好了,你不需要服务器端来做这件事。

在此之后,我将创建进一步的jQuery,以便在dumbFormState插件之后加载,然后显示/隐藏填充的区域。如果你在别人填写表单之前调用它,这是没有问题的,因为它将是空白的,并且你的逻辑不应该显示/隐藏任何空白的东西。

票数 1
EN

Stack Overflow用户

发布于 2010-08-08 08:35:42

我猜您正在寻找序列化form data.serialize()。要做到这一点,您的input元素需要位于form tag plus中,所有这些元素都必须具有name属性。

代码语言:javascript
复制
var form1data = $('#form1').serialize();

alert(form1data);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3432614

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档