0
我有一個表單。填寫表格後，您可以添加或刪除列表中的條目。這一切工作正常。一旦所有條目都被添加到列表中，並且人員提交，Iwant將序列化列表中的數據。序列化列表嘗試序列化列表中的數據
表單提交是我到目前爲止一直在努力的工作，並且我已將它提交到了最近的條目中，但不是列表中的所有條目。
<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>