hellogung
/
Register-Page-Bank-Sampah
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update assets/js/scripts.js 

Fixing NIK and Add Function Change Endppoint Form
main
Agung Gumelar 2023-10-11 02:30:25 +00:00
parent 52c66f11e2
commit 8033e93572
1 changed files with 101 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
assets/js/scripts.js
View File

@ -1,23 +1,109 @@
// Toggle NIK
// Feature: Toggle NIK
$("#jenis-nasabah").on("change", function () {
const jenis = parseInt($(this).val());
const jenisNasabah = parseInt($(this).val());
const nik = $("#nik").parent();
if (jenis == 0) {
// Check value of jenis nasabah
if (jenisNasabah == 0) {
nik.removeClass("d-none").addClass("fade-in");
$("#nik").attr("disabled", false);
nik.on("animationend", function () {
nik.removeClass("fade-in");
nik.off("animationend");
});
} else {
nik.addClass("fade-out");
$("#nik").attr("disabled", true);
nik.on("animationend", function () {
nik.addClass("d-none").removeClass("fade-out");
$("#nik").attr("disabled", true);
nik.off("animationend");
});
}
});
// Toggle Password
// Feature: Input NIK hanya nomor dan tidak boleh lebih dari 16 karakter
$("#nik").on("input", function () {
// Menghapus semua karakter yang bukan angka
$(this).val($(this).val().replace(/\D/g, ""));
// Memastikan panjang input tidak melebihi 16 karakter
if ($(this).val().length > 16) {
$(this).val($(this).val().slice(0, 16));
}
});
// Feature: Toggle jenis Akun
$("#jenisAkun").on("click", function () {
const teksJenis = $("#text-jenis-akun");
const deskripsiJenis = $("#deskripsi-jenis-akun");
const labelNama = $("#label-nama");
const jenisNasabah = $("#jenis-nasabah").parent();
const jenisNasabahValue = $("#jenis-nasabah").val();
const jenisBankSampah = $("#jenis-bank-sampah").parent();
const nik = $("#nik").parent();
const isBankSampah = $(this).is(":checked");
if (isBankSampah) {
// Action for Bank Sampah
teksJenis.text("Bank Sampah");
deskripsiJenis.text(
"Daftarkan Bank Sampah anda sekarang untuk lingkungan yang lebih indah 🌳"
);
labelNama.text("Nama Bank Sampah");
jenisBankSampah.removeClass("d-none");
jenisNasabah.addClass("d-none");
if (!nik.hasClass("d-none")) {
nik.addClass("fade-out");
$("#nik").attr("disabled", true);
nik.on("animationend", function () {
nik.addClass("d-none").removeClass("fade-out");
nik.off("animationend");
});
}
changeSubmitRegister(isBankSampah);
} else {
// Action for Nasabah
teksJenis.text("Nasabah");
deskripsiJenis.text(
"Buat akun nasabah pertama anda dan mulai menabung di E-Bank Sampah 🗑️"
);
labelNama.text("Nama Lengkap");
jenisBankSampah.addClass("d-none");
jenisNasabah.removeClass("d-none");
// Check value of janis nasabah
if (jenisNasabahValue == 0) {
nik.removeClass("d-none").addClass("fade-in");
$("#nik").attr("disabled", false);
nik.on("animationend", function () {
nik.removeClass("fade-in");
nik.off("animationend");
});
} else {
if (!nik.hasClass("d-none")) {
nik.addClass("fade-out");
$("#nik").attr("disabled", true);
nik.on("animationend", function () {
nik.addClass("d-none").removeClass("fade-out");
nik.off("animationend");
});
}
}
changeSubmitRegister(isBankSampah);
}
});
// Feature: Toggle Password
$("#togglePassword").on("click", function () {
const $passwordField = $("#password");
const passwordFieldType = $passwordField.attr("type");
@ -29,41 +115,15 @@ $("#togglePassword").on("click", function () {
}
});
$("#nik").on("input", function () {
// Menghapus semua karakter yang bukan angka
$(this).val($(this).val().replace(/\D/g, ""));
// Feature: Submit Register
function changeSubmitRegister(isBankSampah) {
// Change this string endpoint API
const endpointNasabah = "/api/register/nasabah";
const endpointBankSampah = "/api/register/bank-sampah";
// Memastikan panjang input tidak melebihi 16 karakter
if ($(this).val().length > 16) {
$(this).val($(this).val().slice(0, 16));
}
});
const form = $("#form-register");
// Toggle jenis Akun
$("#jenisAkun").on("click", function () {
const teksJenis = $("#text-jenis-akun");
const deskripsiJenis = $("#deskripsi-jenis-akun");
const labelNama = $("#label-nama");
const jenisNasabah = $("#jenis-nasabah").parent();
const jenisBankSampah = $("#jenis-bank-sampah").parent();
if ($(this).is(":checked")) {
// Action buat Bank Sampah
teksJenis.text("Bank Sampah");
deskripsiJenis.text(
"Daftarkan Bank Sampah anda sekarang untuk lingkungan yang lebih indah 🌳"
);
labelNama.text("Nama Bank Sampah");
jenisBankSampah.removeClass("d-none");
jenisNasabah.addClass("d-none");
} else {
// Action buat Nasabah
teksJenis.text("Nasabah");
deskripsiJenis.text(
"Buat akun nasabah pertama anda dan mulai menabung di E-Bank Sampah 🗑️"
);
labelNama.text("Nama Lengkap");
jenisBankSampah.addClass("d-none");
jenisNasabah.removeClass("d-none");
}
});
isBankSampah
? form.attr("action", endpointBankSampah)
: form.attr("action", endpointNasabah);
}