Submission

document.getElementById("dynamicForm").addEventListener("submit", (e) => {
    e.preventDefault(); // Prevent form submission reload

    // Get form data
    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");

    // Prepare result to display
    const resultContainer = document.getElementById("results");
    resultContainer.innerHTML = `
        <h3>Selected Values</h3>
        <p><strong>Gender:</strong> ${selectedGender}</p>
        <p><strong>Main Age Ranges:</strong> ${selectedMainRanges.join(", ") || "None"}</p>
        <p><strong>Sub Age Ranges:</strong> ${selectedSubRanges.join(", ") || "None"}</p>
        <p><strong>Years:</strong> ${selectedYears.join(", ") || "None"}</p>
        <p><strong>Ethnicities:</strong> ${selectedEthnicities.join(", ") || "None"}</p>
    `;
});