239 lines
10 KiB
Plaintext
239 lines
10 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Ulasan Pelanggan";
|
|
|
|
var questions = new[]{
|
|
new { key = "persyaratan", label = "Bagaimana pendapat Saudara tentang kesesuaian persyaratan pelayanan dengan jenis pelayanannya?" },
|
|
new { key = "prosedur", label = "Bagaimana pemahaman Saudara tentang kemudahan prosedur pelayanan di Laboratorium Lingkungan Hidup Daerah DKI Jakarta?" },
|
|
new { key = "kerahasiaan", label = "Bagaimana pendapat Saudara mengenai jaminan kerahasiaan contoh uji (sampel) di LLHD?" },
|
|
new { key = "kecepatan", label = "Bagaimana pendapat Saudara tentang kecepatan pelayanan di LLHD?" },
|
|
new { key = "ketepatan_waktu", label = "Bagaimana pendapat Saudara tentang ketepatan waktu penyelesaian pengujian laboratorium terhadap jadwal waktu pelayanan yang telah ditetapkan?" },
|
|
new { key = "biaya", label = "Bagaimana pendapat Saudara tentang kesesuaian biaya/tarif dalam pelayanan?" },
|
|
new { key = "produk", label = "Bagaimana pendapat Saudara tentang kesesuaian produk pelayanan antara yang tercantum dalam standar pelayanan dengan hasil yang diberikan?" },
|
|
new { key = "kompetensi", label = "Bagaimana pendapat Saudara tentang kompetensi/kemampuan petugas dalam pelayanan?" },
|
|
new { key = "komunikasi", label = "Bagaimana pendapat Saudara mengenai kemampuan komunikasi petugas dalam memberikan informasi ke pelanggan?" },
|
|
new { key = "sikap", label = "Bagaimana pendapat Saudara perilaku petugas dalam pelayanan terkait kesopanan dan keramahan?" },
|
|
new { key = "penanganan_keluhan", label = "Bagaimana pendapat Saudara tentang respon/bantuan petugas dalam menangani keluhan/pengaduan?" },
|
|
new { key = "fasilitas", label = "Bagaimana pendapat Saudara tentang kenyamanan fasilitas pelayanan di LLHD?" }
|
|
};
|
|
}
|
|
|
|
@section Style {
|
|
<link rel="stylesheet" href="~/webnew/css/FormReview.css" asp-append-version="true" />
|
|
}
|
|
|
|
<div class="container py-5">
|
|
<div class="card form-card mx-auto border-0 shadow-sm">
|
|
<div class="card-body p-md-5 p-4">
|
|
|
|
<h3 class="fw-bold mb-1">Survei Kepuasan Pelanggan</h3>
|
|
<p class="text-muted mb-4">Mohon isi form berikut untuk meningkatkan kualitas pelayanan kami</p>
|
|
|
|
<form id="formUlasan" novalidate>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Jenis Kelamin<span class="text-danger">*</span></label>
|
|
<select class="form-select" id="gender">
|
|
<option value="">Pilih</option>
|
|
<option>Laki-laki</option>
|
|
<option>Perempuan</option>
|
|
</select>
|
|
<small class="text-danger d-none error-msg">Wajib diisi</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Usia<span class="text-danger">*</span></label>
|
|
<input type="number" class="form-control" id="usia" />
|
|
<small class="text-danger d-none error-msg">Wajib diisi</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Pendidikan<span class="text-danger">*</span></label>
|
|
<select class="form-select" id="pendidikan">
|
|
<option value="">Pilih</option>
|
|
<option>SLTA ke bawah</option>
|
|
<option>SLTA</option>
|
|
<option>D1/D2/D3</option>
|
|
<option>S1</option>
|
|
<option>S2/S3/Profesi</option>
|
|
</select>
|
|
<small class="text-danger d-none error-msg">Wajib diisi</small>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label">Pekerjaan<span class="text-danger">*</span></label>
|
|
|
|
<select class="form-select" id="pekerjaan">
|
|
<option value="">Pilih</option>
|
|
<option>PNS/TNI/POLRI</option>
|
|
<option>Pegawai Swasta</option>
|
|
<option>Wiraswasta</option>
|
|
<option>Pelajar/Mahasiswa</option>
|
|
<option value="lainnya">Lainnya</option>
|
|
</select>
|
|
|
|
<input type="text" class="form-control d-none mt-2" id="pekerjaanLainnya"
|
|
placeholder="Isi pekerjaan lainnya..." />
|
|
|
|
<small class="text-danger d-none error-msg">Wajib diisi</small>
|
|
</div>
|
|
|
|
<hr class="my-4" />
|
|
|
|
@for (int i = 0; i < questions.Length; i++)
|
|
{
|
|
<div class="question-card mb-4 p-3">
|
|
|
|
<label class="form-label fw-semibold mb-3">
|
|
@(i + 1). @questions[i].label
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
|
|
<div class="survey-scale">
|
|
<span class="scale-label">Tidak Sesuai</span>
|
|
|
|
<div class="scale-options">
|
|
@for (int j = 1; j <= 4; j++)
|
|
{
|
|
<label class="scale-item">
|
|
<span class="number">@j</span>
|
|
<input type="radio" name="@questions[i].key" value="@j" />
|
|
<span class="circle"></span>
|
|
</label>
|
|
}
|
|
</div>
|
|
|
|
<span class="scale-label text-end">Sangat Sesuai</span>
|
|
</div>
|
|
|
|
<small class="text-danger d-none error-msg">Wajib diisi</small>
|
|
</div>
|
|
}
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Saran dan Masukan<span class="text-danger">*</span></label>
|
|
<textarea class="form-control" id="saran"></textarea>
|
|
<small class="text-danger d-none error-msg">Wajib diisi</small>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label">Ulasan<span class="text-danger">*</span></label>
|
|
<textarea class="form-control" id="ulasan"></textarea>
|
|
<small class="text-danger d-none error-msg">Wajib diisi</small>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary w-100 rounded-pill py-2">
|
|
Kirim
|
|
</button>
|
|
|
|
</form>
|
|
|
|
<div id="successMsg" class="alert alert-success d-none mt-4">
|
|
Ulasan berhasil dikirim. Terima kasih atas partisipasi Anda!
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
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);
|
|
});
|
|
|
|
});
|
|
</script> |