HTML/Javascript表单“如何序列化”；李",；数据何时提交？

这是我的问题：

当用户单击“提交”时，我需要序列化的表单，class=“debug”中显示的JSON数据，包括添加用户后的列表项数据

目前，我看到的唯一数据是当我点击“提交”时输入字段中的当前数据，而不是添加用户时的列表项。除了在输入字段中提交的内容之外，我还需要列表项（如果我添加了用户）

如何使用当前的Javascript实现这一点

无法使用jQuery。无法编辑HTML。只有纯Javascript

谢谢，来自美国的新年快乐

HTML

年龄
关系
---
自己
配偶
小孩
父母亲
祖父母
其他
吸烟者？
添加
提交

JS

函数go（）{ var debug_class=document.querySelectorAll（“.debug”）； 对于（var i=0；i200） return“年龄必须大于0。\n” 返回“” } 函数validateRel（字段）{ 如果（字段==“”）返回“请选择关系\n” 返回“” } document.querySelector（“form”）.onsubmit=function（）{ 返回验证（此） } document.querySelector（“.add”）.onclick=函数（事件）{ go（）； event.preventDefault（）； createinput（） } 计数=0； 函数createinput（）{ field_area=document.querySelector（“.househouse”） var li=document.createElement（“li”）； var p1=document.createElement（“p”）； var p2=document.createElement（“p”）； var p3=document.createElement（“p”）； var x=document.getElementsByName（“年龄”）[0]。值； var y=document.getElementsByName（“rel”）[0]。值； var z=document.getElementsByName（“smoker”）[0]。已选中； 如果（！z）{ z=“非吸烟者\n”； }否则{ z=“吸烟者\n”； } p1.innerHTML=x； p2.innerHTML=y； p3.innerHTML=z； 李.儿童（p1）； li.儿童（p2）； li.儿童（p3）； 场区面积（li）； //拆卸连杆 var removalLink=document.createElement（'a'）； removalLink.onclick=函数（）{ this.parentNode.parentNode.removeChild（this.parentNode） } var removalText=document.createTextNode（'Remove Field'）； appendChild（removalText）； li.appendChild（removalLink）； 计数++ } //序列化表单 变量数据={}； var inputs=[].slice.call（inputs.target.querySelector（'form'）； inputs.forEach（输入=>{ 数据[input.name]=input.value； });

---

JavaScript本质上无法通过典型的HTML“提交”按钮发布动态表单元素。使用jQuery会非常简单，但是您说您不能使用它。此外，HTML结构使通过原始JavaScript处理表单提交变得相当笨拙，因为您无法对其进行编辑以将函数附加到表单提交（也无法更改HTML）

您还需要在提交之前序列化表单，因为没有jQuery，表单很笨重。有很多库可以做到这一点，但您可能需要基于代码结构的特定库。我们可以找到很多关于如何做到这一点的例子

然后需要从表单创建JavaScript元素，手动附加事件侦听器，阻止表单提交，序列化数据，然后手动重新提交

const element = document.querySelector('form');
 element.addEventListener('submit', event => {
   event.preventDefault();
   serialize(element);
   element.submit();
 });

---

这是一个复杂的过程，您可能需要研究整个过程的替代方法。但是，我希望这能够解决您的问题：）

您没有HTML类

调试

，因此您的

go（）

函数不会做任何事情。嘿@obsidian Age忘了完全复制和粘贴我的HTML。刚刚更新了t

function go() {
        var debug_class = document.querySelectorAll(".debug");
        for (var i = 0; i < debug_class.length; i++) {
            var element = debug_class[i];
            element.innerText = JSON.stringify(serializeArray(document.querySelector("form")));
        }

    }

    function serializeArray(form) {
        var field, l, s = [];
        if (typeof form == 'object' && form.nodeName == "FORM") {
            var len = form.elements.length;
            for (i = 0; i < len; i++) {
                field = form.elements[i];
                if (field.name && !field.disabled && field.type != 'file' && field.type != 'reset' && field.type != 'submit' && field.type != 'button') {
                    if (field.type == 'select-multiple') {
                        l = form.elements[i].options.length;
                        for (j = 0; j < l; j++) {
                            if (field.options[j].selected)
                                s[s.length] = {
                                    name: field.name,
                                    value: field.options[j].value
                                };
                        }
                    } else if ((field.type != 'checkbox' && field.type != 'radio') || field.checked) {
                        s[s.length] = {
                            name: field.name,
                            value: field.value
                        };
                    }
                }
            }
        }
        return s;
    }


    function validate(form) {
        fail = validateAge(form.age.value)
        fail += validateRel(form.rel.value)

        if (fail == "") return true
        else {
            alert(fail);
            return false
        }
        go();
    }

    function validateAge(field) {
        if (isNaN(field)) return "No age was entered. \n"
        else if (field < 1 || field > 200)
            return "Age must be greater than 0. \n"
        return ""
    }

    function validateRel(field) {
        if (field == "") return "Please select a relationship \n"
        return ""
    }

    document.querySelector("form").onsubmit = function() {
        return validate(this)
    }

    document.querySelector(".add").onclick = function(event) {
        go();
        event.preventDefault();
        createinput()
    }

    count = 0;

    function createinput() {
        field_area = document.querySelector('.household')
        var li = document.createElement("li");
        var p1 = document.createElement("p");
        var p2 = document.createElement("p");
        var p3 = document.createElement("p");
        var x = document.getElementsByName("age")[0].value;
        var y = document.getElementsByName("rel")[0].value;
        var z = document.getElementsByName("smoker")[0].checked;
        if (!z) {
            z = "Non smoker \n";
        } else {
            z = "Smoker \n";
        }
        p1.innerHTML = x;
        p2.innerHTML = y;
        p3.innerHTML = z;
        li.appendChild(p1);
        li.appendChild(p2);
        li.appendChild(p3);
        field_area.appendChild(li);
        //removal link
        var removalLink = document.createElement('a');
        removalLink.onclick = function() {
            this.parentNode.parentNode.removeChild(this.parentNode)
        }
        var removalText = document.createTextNode('Remove Field');
        removalLink.appendChild(removalText);
        li.appendChild(removalLink);
        count++
    }

    // serialize form

    var data = {};
    var inputs = [].slice.call(inputs.target.querySelector('form'));
    inputs.forEach(input => {
        data[input.name] = input.value;
    });

// Sample serialization function structure
function serialize(form) {
    // Serialize
}

const element = document.querySelector('form');
 element.addEventListener('submit', event => {
   event.preventDefault();
   serialize(element);
   element.submit();
 });