HTML/Javascript 表单提交时如何序列化“li”数据？ [关闭]

Question

这是我的问题：

当用户点击“提交”时，我需要将表单序列化，JSON数据显示在class="debug"中，如果添加了用户，包括列表项数据。

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

如何使用我当前的 Javascript 执行此操作？

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

来自美国的感谢和新年快乐！

HTML

<div class="builder">
    <ol class="household"></ol>
    <form>
        <div>
            <label>Age
                <input type="text" name="age">
            </label>
        </div>
        <div>
            <label>Relationship
                <select name="rel">
                    <option value="">---</option>
                    <option value="self">Self</option>
                    <option value="spouse">Spouse</option>
                    <option value="child">Child</option>
                    <option value="parent">Parent</option>
                    <option value="grandparent">Grandparent</option>
                    <option value="other">Other</option>
                </select>
            </label>
        </div>
        <div>
            <label>Smoker?
                <input type="checkbox" name="smoker">
            </label>
        </div>
        <div>
            <button class="add">add</button>
        </div>
        <div>
            <button type="submit">submit</button>
        </div>
    </form>
</div>
<pre class="debug"></pre>

JS

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;
    });

Answer 1

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

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

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

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

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

这是一个复杂的过程，您可能希望从整个过程中寻找一种替代方法。但是，我希望这能够解决您的问题:)