Question

这是我的问题：

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

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

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

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

谢谢＆amp;来自美国的新年快乐！

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发布动态表单元素＆＃39;提交＆＃39;按钮。使用jQuery会相当简单，但是你说你不能使用它。此外，您的HTML结构使得通过原始JavaScript处理表单提交相当笨拙，因为您无法编辑它以将函数附加到表单提交（也不更改HTML）。

您还需要在提交之前序列化表单，这在没有jQuery的情况下很笨拙。有很多库可以做到这一点，但您可能需要一个基于您的代码结构的特定库。关于如何做到这一点的大量例子可以找到here。

vector2D& positionGet() {
    return _position;
};

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

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

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

HTML / Javascript表单如何在提交时序列化“li”数据？

1 个答案: