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

Question

我有一个带有 HTML 标签的 div 和像 check boxes, text and drop lists 这样的表单控件。我想 post 整个内容连同表单控件的状态（即捕获用户的选择）将其保存到数据库中，然后重新呈现确切的 HTML.

我该怎么做？我用了

$("#div").clone()

但是控制状态好像没有保存。注意：我不想 post 内部表单，然后重新呈现表单状态，因为 HTML 是动态的（它是一个 HTML 模板）

Answer 1

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

看到这个 fiddle - 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);
    //...

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

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 内容包含表单控件状态

Submit div content contains form control states

javascript

forms

jquery

serialization

dynamic