document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById("waitlist-form");
const identity = document.getElementById("identity");
const subjectBlock = document.getElementById("subjectBlock");
const subjectSelect = document.getElementById("subject");
const fields = {
nameFields: document.getElementById("nameFields"),
jobField: document.getElementById("jobField"),
emailField: document.getElementById("emailField"),
instagramField: document.getElementById("instagramField"),
tiktokField: document.getElementById("tiktokField"),
locationField: document.getElementById("locationField"),
notesField: document.getElementById("notesField"),
};
const requiredByType = {
brand: ["firstName", "lastName", "jobTitle", "email", "notes"],
creator: ["firstName", "lastName", "email", "instagram", "tiktok", "location"],
charity: ["firstName", "lastName", "jobTitle", "email", "notes"],
donor: ["firstName", "lastName", "email", "location"],
volunteer: ["firstName", "lastName", "email", "location"],
};
const subjectOptions = {
brand: [
"Interested in corporate sponsorships/partnerships",
"Interested in corporate volunteering"
],
creator: [
"Donating", "Collaborating", "Volunteering"
],
donor: [
"In kind (products)", "In cash"
]
};
identity.addEventListener("change", function () {
const type = identity.value;
// Reset all fields
subjectBlock.classList.add("hidden");
subjectSelect.innerHTML = "";
subjectSelect.removeAttribute("required");
Object.values(fields).forEach(field => {
field.classList.add("hidden");
const inputs = field.querySelectorAll("input, textarea");
inputs.forEach(input => input.removeAttribute("required"));
});
// Show subject options if needed
if (subjectOptions[type]) {
subjectBlock.classList.remove("hidden");
subjectSelect.innerHTML = ``;
subjectOptions[type].forEach(option => {
const opt = document.createElement("option");
opt.textContent = option;
opt.value = option;
subjectSelect.appendChild(opt);
});
subjectSelect.setAttribute("required", true);
}
// Map inputs to container ids
const fieldMap = {
firstName: "nameFields",
lastName: "nameFields",
jobTitle: "jobField",
email: "emailField",
instagram: "instagramField",
tiktok: "tiktokField",
location: "locationField",
notes: "notesField"
};
// Show and require the right fields
const requiredFields = requiredByType[type] || [];
requiredFields.forEach(name => {
const input = form.querySelector(`[name="${name}"]`);
if (input) {
input.setAttribute("required", true);
const containerId = fieldMap[name];
if (containerId) {
document.getElementById(containerId).classList.remove("hidden");
}
}
});
});
// Optionally trigger updateForm on load to hide all optional fields initially
identity.dispatchEvent(new Event('change'));
// Form submit validation
form.addEventListener("submit", function (e) {
if (!form.checkValidity()) {
e.preventDefault();
alert("Please complete all required fields.");
}
});
});
