Javascript 序列化列表尝试序列化列表中的数据_Javascript

Javascript 序列化列表尝试序列化列表中的数据

javascript

Javascript 序列化列表尝试序列化列表中的数据,javascript,Javascript,我有一张表格。填写表格后，您可以从列表中添加或删除条目。这一切都很好。我要做的是，一旦所有条目都添加到列表中，用户点击submit，我就想序列化列表中的数据到目前为止，表单提交是我一直在做的工作，我把它带到了最新的条目，但不是列表中的所有条目 <html> <head> <meta charset="utf-8"> <title>Home builder</title> <style>

我有一张表格。填写表格后，您可以从列表中添加或删除条目。这一切都很好。我要做的是，一旦所有条目都添加到列表中，用户点击submit，我就想序列化列表中的数据

到目前为止，表单提交是我一直在做的工作，我把它带到了最新的条目，但不是列表中的所有条目

<html>
<head>
    <meta charset="utf-8">
    <title>Home builder</title>
    <style>
        .debug {
            font-family: monospace;
            border: 1px solid black;
            padding: 10px;
            display: none;
        }
    </style>
</head>
<body>
    <h1>Household builder</h1>
    <div class="builder">
        <ol class="household"></ol>
        <form name="myForm" method="post" >
            <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>
                <label id="house">Home
                    <select id="homelist" size="9">
                    <option></option>
                    </select>
                </label>
            </div>
            <div>
                <button type="button"      onclick="validateForm()">add</button>

                <button type="button" onclick="removeList()">Remove</button>

                <button type="submit" onclick="Submission()">submit</button>
            </div>
        </form>
        <!-- <div id="results"> </div> -->
    </div>
    <pre class="debug" id="results"> </pre>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script >

        function Submission() {
            var x = $('#household :input').serializeArray();
            $.each(x, function(i, field){
                $("#results").append(field.name + ":" + field.value + " ");
            })
        }
        function validateForm() {
            var x = document.forms["myForm"]["age"].value;
            if  (isNaN(x)|| x == ""|| x < 0) {
                alert("Age must be filled out and must be greater than 0");
                return false;
            }
            else
                addList();
        }
        function addList() {
            var x = document.getElementById("homelist");
            var option = document.createElement("option");
            option.text = ("Relationship: "+ document.forms["myForm"]["rel"].value + " Age: "+document.forms["myForm"]["age"].value+" Smoker: "+document.forms["myForm"]["smoker"].checked);
            x.add(option)
        }

    </script>
</body>


房屋建筑商
.调试{
字体系列：monospace；
边框：1px纯黑；
填充：10px；
显示：无；
}
家庭建筑商
年龄
关系
---
自己
配偶
小孩
父母亲
祖父母
其他
吸烟者？
家
添加
去除
提交
函数提交（）{
var x=$（'#household:input'）.serializeArray（）；
$.each（x，函数（i，字段）{
$（“#结果”）.append（field.name+”：“+field.value+”）；
})
}
函数validateForm（）{
var x=document.forms[“myForm”][“age”]。值；
如果（isNaN（x）| | x==“”| | x<0）{
警报（“年龄必须填写且必须大于0”）；
返回false；
}
其他的
addList（）；
}
函数addList（）{
var x=document.getElementById（“homelist”）；
var option=document.createElement（“选项”）；
option.text=（“关系：”+document.forms[“myForm”][“rel”]。value+“Age:”+document.forms[“myForm”][“Age”]。value+“Smoker:”+document.forms[“myForm”][“Smoker”]选中）；
x、 添加（选项）
}

使用

.serialize（）

jQuery方法怎么样？检查本页上的示例：