Jquery 在一个表单中捕获所有HTML，包括文本字段值，而不使用POST

我正在开发一个表单生成器界面，供用户添加各种输入字段，以及他们添加到类别和子类别中的文本区域

我已经编写了Javascript（JQuery）来生成嵌套的类别和输入字段，供用户填写

我需要捕获这个精确生成的HTML，包括输入字段中的值，以便当他们返回编辑此表单时，它与他们上次离开时一样

我曾经尝试过使用$（“#myForm”）.html（）并将其保存到一个隐藏的文本区域，然后保存到数据库中。这很好，只是.html（）不能捕获输入字段中输入的内容

稍后，我需要解析生成的HTML，过滤掉所有的添加/删除按钮，最后得到嵌套的类别和表单字段值

我的想法是在所有字段上绑定keyup事件来更新它们自己的值字段，然后.html（）就可以捕获它了？有更好的方法吗

---

谢谢

您能否将这些内容存储到数组的内容中，并将其存储在数据库中，然后将指向该内容的指针存储在Cookie、会话中，或者在用户登录时返回它

---

您可以使用上面提到的方法填充生成的HTML，但您必须迭代字段，并将此时输入的数据值写入要写回DB的数组。

如果您在解析生成的HTML以重新生成表单时遇到麻烦，使用jQuery的内置表单序列化函数来存储表单值可能更容易：

---

为什么要将表单的HTML存储在数据库中？
如果表单发生更改（新字段作为发布的一部分被添加/删除），该怎么办？

---

而是使用jQuery.serialize存储字段值，然后根据存储的json字符串填充表单上的字段。

我不知道您是否在查找此字段。 我也有类似的问题，经过一些研究，我发现这可以解决我的问题（效率不高，但足够了）：

---

谢谢你的快速回答。我最初没有考虑过这种方法，因为我需要所有表单字段以及包装它们的HTML。我想我可以抓取序列化的内容，抓取HTML，然后再将它们相互转换，顺便说一句，添加keyup处理程序来更新其value属性似乎无论如何都不起作用。var发送方=$（e.currentTarget）；sender.attr（“value”，sender.val（））；您可以使用

html

和

serialize

，这样就省去了您提到的方法（将keyup事件绑定到所有表单字段…）的麻烦。虽然我最终没有完全像这样做，但这是一种混合，这让我走上了正确的方向。除了这个“表单生成器”，这个表单中还有其他东西，常规的jquery.serialize（）无法解决这个问题。我需要序列化特定html块中的字段，这很简单。我存储这个序列化和生成的html。当用户进入编辑“form builder”字段时，我根据存储的内容生成html，然后读取存储的序列化，在“&”循环上拆分，然后在“=”循环上拆分。抓取第二个位置的字段名，.val（）。基本上，我正在创建一个表单生成器。前端用户将看到：标签文本：单位…后端用户需要输入标签和单位的显示内容。并且可以添加无限多的项目。我希望我说得够清楚了！看我的评论上面我最后做了什么。存储JSON并不能做到这一点，因为我永远不知道所有字段的名称，所以我不知道在JSON中调用什么属性来查找它的值。将其序列化为字符串，然后在“&”和“=”上拆分以选择正确的字段和值。Cookie在这种情况下不起作用。这是CMS的一个组件，任何人都可以通过任何机器访问。抓取，这些作为一个数组也不是一个坏主意。我可以将此用作Jquery.serialization（）的替代方法，因为输入只需要具有顺序名称属性（field1、field2、field3等），因为它们获得了一个简单的接口，可以将新输入注入到表单生成器中。

        $('#form input:text').each(
            function(){
                $(this).attr('value', $(this).val());
            });

        $('#form input:radio').each(
            function(){
                if($(this).is(':checked')) {
                    $(this).attr('checked', 'checked');
                }
                else{
                    $(this).removeAttr('checked');
                }
            });
        // I only give sample for input text and input radio
        var html = $("#form ").html();
        console.log (html);