<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.container {
margin-bottom: 20px;
}
.sub-ranges, .years {
margin-left: 20px;
}
.years {
margin-left: 40px;
}
</style>
</head>
<body>
<h1>Dynamic Form: Age, Ethnicity, and Gender</h1>
<form id="dynamicForm">
<!-- Gender Section -->
<div class="container">
<h2>Gender</h2>
<label>
<input type="radio" name="gender" value="Male" checked> Male
</label><br>
<label>
<input type="radio" name="gender" value="Female"> Female
</label><br>
</div>
<!-- Age Section -->
<div class="container">
<h2>Age Ranges</h2>
<div id="ageRangesContainer"></div>
</div>
<!-- Ethnicity Section -->
<div class="container">
<h2>Ethnicities</h2>
<div id="ethnicitiesContainer"></div>
</div>
<button type="submit">Submit</button>
</form>
<script>
// Data Definitions
const subRangesData = {
"0-4": [{ range: "0-4", years: [0, 1, 2, 3, 4] }],
"5-30": [
{ range: "5-9", years: [5, 6, 7, 8, 9] },
{ range: "10-14", years: [10, 11, 12, 13, 14] },
{ range: "15-20", years: [15, 16, 17, 18, 19, 20] },
{ range: "20-25", years: [20, 21, 22, 23, 24, 25] },
{ range: "26-30", years: [26, 27, 28, 29, 30] }
],
"31-60": [
{ range: "31-35", years: [31, 32, 33, 34, 35] },
{ range: "36-40", years: [36, 37, 38, 39, 40] },
{ range: "41-45", years: [41, 42, 43, 44, 45] },
{ range: "46-50", years: [46, 47, 48, 49, 50] },
{ range: "51-55", years: [51, 52, 53, 54, 55] },
{ range: "56-60", years: [56, 57, 58, 59, 60] }
],
"61-120": [
{ range: "61-70", years: [61, 62, 63, 64, 65, 66, 67, 68, 69, 70] },
{ range: "71-80", years: [71, 72, 73, 74, 75, 76, 77, 78, 79, 80] },
{ range: "81-90", years: [81, 82, 83, 84, 85, 86, 87, 88, 89, 90] },
{ range: "91-100", years: [91, 92, 93, 94, 95, 96, 97, 98, 99, 100] },
{ range: "101-110", years: [101, 102, 103, 104, 105, 106, 107, 108, 109, 110] },
{ range: "111-120", years: [111, 112, 113, 114, 115, 116, 117, 118, 119, 120] }
]
};
const ethnicityData = [
"European",
"Maori",
"Pacific Peoples",
"Asian",
"Middle Eastern/Latin American/African",
"Other ethnicity",
"Total people stated",
"Not elsewhere included"
];
// Container References
const ageRangesContainer = document.getElementById("ageRangesContainer");
const ethnicitiesContainer = document.getElementById("ethnicitiesContainer");
// Generate Age Ranges
Object.keys(subRangesData).forEach(mainRange => {
const mainRangeDiv = document.createElement("div");
const mainCheckbox = document.createElement("input");
mainCheckbox.type = "checkbox";
mainCheckbox.id = mainRange;
mainCheckbox.name = "mainRanges";
mainCheckbox.value = mainRange;
const mainLabel = document.createElement("label");
mainLabel.htmlFor = mainRange;
mainLabel.textContent = mainRange;
mainRangeDiv.appendChild(mainCheckbox);
mainRangeDiv.appendChild(mainLabel);
// Subranges Container
const subRangeDiv = document.createElement("div");
subRangeDiv.classList.add("sub-ranges");
subRangeDiv.style.display = "none";
subRangesData[mainRange].forEach(subRange => {
const subCheckbox = document.createElement("input");
subCheckbox.type = "checkbox";
subCheckbox.name = "subRanges";
subCheckbox.value = subRange.range;
const subLabel = document.createElement("label");
subLabel.textContent = subRange.range;
subRangeDiv.appendChild(subCheckbox);
subRangeDiv.appendChild(subLabel);
// Years Container
const yearsDiv = document.createElement("div");
yearsDiv.classList.add("years");
subRange.years.forEach(year => {
const yearCheckbox = document.createElement("input");
yearCheckbox.type = "checkbox";
yearCheckbox.name = "years";
yearCheckbox.value = year;
const yearLabel = document.createElement("label");
yearLabel.textContent = year;
yearsDiv.appendChild(yearCheckbox);
yearsDiv.appendChild(yearLabel);
});
subRangeDiv.appendChild(yearsDiv);
});
mainRangeDiv.appendChild(subRangeDiv);
ageRangesContainer.appendChild(mainRangeDiv);
// Toggle Subranges
mainCheckbox.addEventListener("change", () => {
subRangeDiv.style.display = mainCheckbox.checked ? "block" : "none";
});
});
// Generate Ethnicities
ethnicityData.forEach(ethnicity => {
const ethnicityCheckbox = document.createElement("input");
ethnicityCheckbox.type = "checkbox";
ethnicityCheckbox.name = "ethnicities";
ethnicityCheckbox.value = ethnicity;
const ethnicityLabel = document.createElement("label");
ethnicityLabel.textContent = ethnicity;
ethnicitiesContainer.appendChild(ethnicityCheckbox);
ethnicitiesContainer.appendChild(ethnicityLabel);
ethnicitiesContainer.appendChild(document.createElement("br"));
});
// Form Submission
document.getElementById("dynamicForm").addEventListener("submit", (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const selectedGender = formData.get("gender");
const selectedMainRanges = formData.getAll("mainRanges");
const selectedSubRanges = formData.getAll("subRanges");
const selectedYears = formData.getAll("years");
const selectedEthnicities = formData.getAll("ethnicities");
console.log({
gender: selectedGender,
mainRanges: selectedMainRanges,
subRanges: selectedSubRanges,
years: selectedYears,
ethnicities: selectedEthnicities
});
});
</script>
</body>
</html>
