100 lines
3.4 KiB
JavaScript
100 lines
3.4 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
|
|
const form = document.getElementById("formUlasan");
|
|
const pekerjaan = document.getElementById("pekerjaan");
|
|
const pekerjaanLainnya = document.getElementById("pekerjaanLainnya");
|
|
const successMsg = document.getElementById("successMsg");
|
|
|
|
pekerjaan.addEventListener("change", function () {
|
|
if (this.value === "lainnya") {
|
|
pekerjaanLainnya.classList.remove("d-none");
|
|
} else {
|
|
pekerjaanLainnya.classList.add("d-none");
|
|
pekerjaanLainnya.value = "";
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll("input, select, textarea").forEach(el => {
|
|
el.addEventListener("input", function () {
|
|
const container = this.closest(".mb-3, .mb-4");
|
|
const errorMsg = container?.querySelector(".error-msg");
|
|
|
|
this.classList.remove("is-invalid");
|
|
if (errorMsg) errorMsg.classList.add("d-none");
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll("input[type=radio]").forEach(input => {
|
|
input.addEventListener("change", function () {
|
|
const card = this.closest(".question-card");
|
|
const errorMsg = card.querySelector(".error-msg");
|
|
|
|
card.classList.remove("border", "border-danger");
|
|
errorMsg.classList.add("d-none");
|
|
});
|
|
});
|
|
|
|
form.addEventListener("submit", function (e) {
|
|
e.preventDefault();
|
|
|
|
let isValid = true;
|
|
const penilaian = {};
|
|
|
|
["gender", "usia", "pendidikan", "pekerjaan", "saran", "ulasan"].forEach(id => {
|
|
const el = document.getElementById(id);
|
|
const container = el.closest(".mb-3, .mb-4");
|
|
const errorMsg = container.querySelector(".error-msg");
|
|
|
|
if (!el.value.trim()) {
|
|
isValid = false;
|
|
el.classList.add("is-invalid");
|
|
errorMsg.classList.remove("d-none");
|
|
}
|
|
});
|
|
|
|
if (pekerjaan.value === "lainnya" && !pekerjaanLainnya.value.trim()) {
|
|
isValid = false;
|
|
pekerjaanLainnya.classList.add("is-invalid");
|
|
}
|
|
|
|
document.querySelectorAll(".question-card").forEach(card => {
|
|
const checked = card.querySelector("input:checked");
|
|
const errorMsg = card.querySelector(".error-msg");
|
|
|
|
if (!checked) {
|
|
isValid = false;
|
|
card.classList.add("border", "border-danger");
|
|
errorMsg.classList.remove("d-none");
|
|
} else {
|
|
const input = card.querySelector("input:checked");
|
|
penilaian[input.name] = Number(input.value);
|
|
}
|
|
});
|
|
|
|
if (!isValid) return;
|
|
|
|
const data = {
|
|
gender: document.getElementById("gender").value,
|
|
usia: Number(document.getElementById("usia").value),
|
|
pendidikan: document.getElementById("pendidikan").value,
|
|
pekerjaan: pekerjaan.value === "lainnya"
|
|
? pekerjaanLainnya.value
|
|
: pekerjaan.value,
|
|
saran: document.getElementById("saran").value,
|
|
ulasan: document.getElementById("ulasan").value,
|
|
penilaian: penilaian
|
|
};
|
|
|
|
console.log("DATA FINAL:", data);
|
|
|
|
form.reset();
|
|
pekerjaanLainnya.classList.add("d-none");
|
|
|
|
successMsg.classList.remove("d-none");
|
|
|
|
setTimeout(() => {
|
|
successMsg.classList.add("d-none");
|
|
}, 3000);
|
|
});
|
|
|
|
}); |