提交 div 内容包含表单控件状态

Posted 2023-05-09

【中文标题】提交 div 内容包含表单控件状态

【英文标题】：Submit div content contains form control states

【发布时间】：2015-08-10 18:28:14

【问题描述】：

我有一个div，带有 html 标记和表单控件，例如 check boxes, text and drop lists。我想发布整个内容以及表单控件的状态（即捕获用户的选择）以将其保存到数据库中，然后重新呈现确切的 HTML。

我该怎么做？我用过

$("#div").clone()

但似乎控制状态没有保存。 注意：我不想发布内部表单，然后重新渲染表单状态，因为 HTML 是动态的（它是 HTML 模板）

【参考方案1】：

如果我正确理解您的问题，您需要先将控件状态存储到 HTML 元素中（存储到标记中），然后提交 div 的 innerHTML 属性...

看这个小提琴 - http://jsfiddle.net/esy1cc8z/

首先你需要遍历指定DIV中的所有表单控件：

var ctrls = parent.querySelectorAll("input, select, textarea");

for(var i = 0; i < ctrls.length; i++)
    var el = ctrls.item(i);
    //...

然后将各种表单控件的状态作为属性（= HTML 中的默认值）存储到 DOM 元素中：

var type = el.getAttribute("type");
//For checkbox

//Checkbox
if(type == "checkbox")

    if(el.checked)
        el.setAttribute("checked", "checked");
    else
        el.removeAttribute("checked");

//Other textual / numeric input types
 else 

    el.setAttribute("value", el.value);                 

当然如果你需要可用的算法那么你需要为所有的表单控件类型编写条件，这只是一个例子......

注意：这是纯 JS 解决方案，使用 jQuery 可能代码更简单...

【讨论】：

我已将小提琴更新为更具示例性，并将整个 div 控件克隆到具有控件状态的新 div 中 - jsfiddle.net/esy1cc8z/1

你的解决方案对我有用，非常感谢，Jiri，你就是那个人。