Kita akan melanjutkan pelajaran kita mengenai Event Handler, namun kali ini kita langsung praktek membuat script yang nantinya akan sangat berguna pada saat teman-teman melakukan pemograman web yang berhubungan dengan form. Kita akan sering menghadapi masalah dimana kita ingin agar pengunjung situs hanya mengisikan angka saja pada formulir kita, misalkan pada saat kita meminta data seperti nomor handphone, umur, kode pos, dan lain-lain.

Pada video ini, kita akan membuat script sederhana agar pengunjung hanya bisa mengetik angka di formulir kita. Sebagai contoh, disini adalah form untuk mengisikan jurnal akuntansi. Dimana kita meminta pengunjung untuk memasukkan nilai yang berupa angka, baik pada bagian debit maupun pada bagian credit.

Perhatikan pada saat saya berada di elemen input untuk debit. Saya tidak bisa mengetikkan huruf seperti abc. Saya hanya bisa memasukkan angka, misalkan 5 juta. Pada saat saya pindah ke elemen input untuk credit, maka angka pada debit berubah menjadi 5,000,000. Ada yang namanya thousand separator atau pemisah ribuan, sehingga angka menjadi lebih mudah untuk dibaca. Kalau saya kembali ke input debit, maka angka berubah kembali menjadi 5 juta.

Nah, untuk input credit disini masih belum kita berikan validasi. Ini adalah input standart. Jadi kita bisa mengetikkan apa saja disini. Misalkan kita ketik abc. Bisa ya. Nah, kalau misalkan tulisan abc ini saya copy dan saya coba paste ke bagian debit, maka tidak terjadi apa-apa. Karena kita juga telah menuliskan script untuk validasi nilai paste, agar pengunjung tidak bisa melakukan paste nilai yang bukan berupa angka. Sebaliknya, kalau saya meng-copy nilai yang berupa angka, misalkan angka 1234, maka nilai tersebut bisa di paste ke debit.

Dan bagian yang paling penting dari script, adalah cara penggunaannya yang gampang. Script yang kita tulis ini akan gampang untuk digunakan. Perhatikan pada kode HTML. Untuk memberikan validasi angka pada input debit, kita cukup menambahkan attribute class=”number”. Jadi kalau kita ingin agar input credit juga memiliki validasi angka, kita tinggal tambahkan saja attribute class=”number”. Dan kalau kita refresh browser, sekarang kita sudah tidak bisa mengetikkan huruf pada bagian credit. Kita hanya bisa mengetikkan angka. Lalu pada saat kita memindahkan fokus ke bagian lain, akan muncul pemisah ribuan.

Kita langsung praktek coding ya. Disini sudah tersedia satu file HTML, yang tampilannya sama persis dengan halaman yang kita lihat barusan. Pada bagian body, terdapat judul Jurnal Akuntansi. Diikuti dengan sebuah tag form. Di dalam form, terdapat input debit, dan input credit, dan terakhir ada tombol submit. Perhatikan bahwa input debit memiliki attribute class=”number”, sedangkan input credit tidak memiliki class sama sekali. Seperti biasa, sebelum tag penutup body, kita membuat tag script yang mengarah ke number.js. Namun file number.js masih belum ada isinya.

Sebelum melanjutkan, kita lihat dahulu referensi dari MDN. Link untuk melihat referensi ini bisa dilihat juga pada deskripsi video. Disini ada daftar event milik Element. Ada banyak ya. Namun event yang berhubungan dengan penekanan tombol pada keyboard ada 3 buah, yaitu keydown, keypress dan keyup. Perhatikan lagi pada sebelah kiri tulisan keypress terdapat icon merah dengan gambar tong sampah. Artinya event keypress ini sudah deprecated, atau tidak digunakan lagi. Apabila kita sedang menulis script baru, disarankan tidak menggunakan event keypress, karena suatu saat nanti script kita akan menjadi error karena event keypress sudah dihapus dari sistem.

Jadi pada video ini, kita akan belajar dua event terlebih dahulu ya. Yaitu event keydown yang terjadi pada saat kita menekan sebuah tombol pada keyboard. Dan kemudian event keyup terjadi pada saat kita mengangkat jari kita dari tombol tersebut.

Kita kembali ke Javascript. Kita buat dua buah function ya. Yang pertama adalah onKeyDown. Isinya hanya console.log(“onKeyDown”) saja. Dan yang kedua adalah onKeyUp. Isinya juga sama yaitu console log(“onKeyUp”).

Kita tambahkan kedua function ini ke event element. Pertama kita lakukan looping dahulu dulu ya. for(el of document.getElementsByClassName(“number”). Artinya kita mengambil semua element yang mengandung kelas “number”. Dan kemudian di setiap elementnya kita panggil method el.addEventListener(“keydown”, onKeyDown). Artinya kita menjalankan function onKeyDown pada saat tombol ditekan. Kemudian kita tambahkan lagi el.addEventListener(“keyup”, onKeyUp). Artinya kita menjalankan function onKeyUp pada saat tombol dilepaskan.

function onKeyDown()
{
  console.log("onKeyDown");
}

function onKeyUp()
{
  console.log("onKeyUp");
}

for(el of document.getElementsByClassName("number"))
{
  el.addEventListener("keydown", onKeyDown);
  el.addEventListener("keyup", onKeyUp);
}

Kita coba hasilnya di browser. Pertama kita klik dahulu bagian input debit. Perhatikan pada saat kita menekan tombol, maka di console keluar tulisan onKeyDown. Pada saat kita melepaskan tombol tersebut, maka di console keluar tulisan onKeyUp. Hal seperti ini kurang begitu kelihatan pada video, oleh karena itu saya menyarankan agar teman-teman mencoba sendiri di komputer masing-masing, sehingga lebih kelihatan perbedaannya.

Ada 2 buah perbedaan antara event keydown dan keyup. Yang pertama adalah setelah keydown, maka tombol yang kita tekan langsung muncul di input, tanpa perlu menunggu keyup. Yang kedua, keydown dapat terjadi secara berulang-ulang, yaitu pada saat kita menekan tombol dan menahannya. Sedangkan keyup hanya bisa terjadi satu kali pada saat kita melepaskan tombol tersebut. Oleh karena itu, biasanya programmer lebih banyak menggunakan keydown daripada keyup.

Sekarang kita masuk ke pertanyaan berikutnya. Kita tau bahwa ada terjadi peristiwa penekanan sebuah tombol. Namun bagaimana cara kita bisa mengetahui tombol apa yang sedang ditekan? Nah, kita bisa menambahkan parameter di dalam function yang akan dipanggil oleh event. Parameter ini akan mengandung informasi lebih lanjut mengenai event yang sedang terjadi.

Sebagai contoh. Pertama kita komentari dahulu event keyup. Jadi kita bisa lebih berfokus ke event keydown ya. Pada function onKeyDown, kita bisa menambahkan satu buah parameter. Biasanya parameter ini diberi nama huruf e, atau singkatan evt, atau kata lengkap event. Di contoh ini kita gunakan evt saja ya. Kemudian kita ubah console.log menjadi menuliskan nilai dari evt.

Kita refresh browser. Dan perhatikan sekarang setiap kali saya menekan tombol pada keyboard, maka console menampilkan object KeyboardEvent. Dari objek ini, kita bisa mengetahui tombol apa yang sedang ditekan. Perhatikan nilai dari property key dan code.

Agar lebih jelas, kita ubah lagi source code kita ya. Argument pada console.log kita ubah menjadi string literal:

`Key = ${evt.key}. Code = ${evt.code}.`

Kita refresh browser dan kita tes lagi ya. Kita bisa lihat bahwa key menunjukkan tombol apa yang sedang kita tekan. Sedangkan code menunjukkan tombol secara lebih detail. Misalkan kalau kita menekan tombol Control di sebelah kiri keyboard, dan kemudian kita tekan juga Control di sebelah kanan keyboard. Maka nilai pada key adalah “Control”. Sedangkan nilai pada code akan membedakan antara tombol Control di sebelah kiri dan sebelah kanan. Begitu juga kalau kita menekan tombol 1 pada keyboard, dan kemudian menekan tombol 1 pada numpad. Nilai pada key adalah sama, sedangkan nilai pada code-nya berbeda. Jadi kalau kita mau menunjuk secara spesifik ke tombol mana yang sedang ditekan, maka kita menggunakan property code. Sedangkan kalau kita lebih mementingkan nilai, misalkan yang penting adalah angka 1, tidak peduli angka satu yang sedang ditekan berada di kiri atau kanan, maka kita menggunakan property key.

Dalam contoh kasus, kita ingin mengambil nilai dari angka 0 hingga angka 9. Kita bisa menggunakan pengkondisian seperti ini. Jika nilai dari evt.key lebih besar sama dengan 0 dan evt.key lebih kecil sama dengan 9, maka benar. Untuk sementara kita tuliskan dahulu “true” pada console log. Kemudian sebaliknya, kita tulis “false”.

Kita coba lagi di browser. Sekarang apabila kita menekan tombol huruf, maka hasilnya adalah salah. Sedangkan kalau kita menekan angka diantara 0 hingga 9, maka hasilnya adalah true. Begitu juga kalau kita menekan tombol 0 hingga 9 pada numpad.

Selanjutnya, kita ingin agar kalau tombol yang ditekan bukanlah angka, maka tombol tersebut tidak diproses. Dalam hal ini artinya tombol tersebut tidak ditulis ke dalam input debit. Disini kita bisa menggunakan method preventDefault() dari KeyboardEvent. Method ini akan membatalkan proses yang secara default dilakukan oleh event. Kita kembali ke source code. Kita ganti kode pada baris yang menghasilkan false, menjadi evt.preventDefault().

Kita coba di browser. Kalau misalkan kita menekan tombol huruf pada input debit, maka huruf tersebut tidak ditulis di dalam input. Hal ini disebabkan karena kita memanggil method preventDefault. Sedangkan kalau kita menekan tombol angka, maka angka tersebut dimasukkan ke dalam input.

Sekarang kita coba copy semua isi dari function onKeyDown. Lalu kita paste ke dalam function onKeyUp. Kita tambahkan parameter evt. Jadi sekarang isi dari kedua function ini adalah sama persis ya. Selanjutnya kita ganti event kita dari keydown menjadi keyup.

Kita coba lagi di browser. Dan ternyata sekarang, pada saat kita menekan baik huruf maupun angka, semuanya tetap dituliskan ke dalam input. Mengapa? Kalau teman-teman perhatikan lagi, pada saat kita menekan tombol, hurufnya sudah langsung dituliskan di dalam input. Kemudian pada saat kita melepaskan tombolnya, barulah event keyup dilaksanakan. Method preventDefault pada event keyup tidak bisa membatalkan huruf yang sudah terlanjur ditulis di dalam input. Ini adalah salah satu alasan mengapa programmer jarang menggunakan event keyup.

Jadi pelajaran disini adalah, walaupun kita telah menuliskan kode dengan benar, namun kode yang sama akan menjadi salah hanya karena kita salah memilih event. Ada event-event tertentu yang tidak bisa menjalankan preventDefault, terutama karena kode yang kita tulis dijalankan setelah peristiwanya terjadi. Sekarang kita kembali ke event keydown.

Perhatikan lagi bahwa event keydown menangkap semua tombol, dan hanya menjalankan tombol angka ‘0’ hingga angka ‘9’ saja. Artinya pada saat kita berada di input debit, kita tidak bisa menekan tombol lain. Termasuk tombol backspace dan delete untuk memperbaiki data yang salah tulis, atau tombol anak panah untuk bergeser ke kiri dan kanan. Jadi kita harus menambahkan kode agar tombol-tombol tertentu tetap diperbolehkan untuk ditekan. Kita coba tekan saja tombol-tombol yang akan kita perbolehkan untuk dieksekusi, dan kita catat semua key dari tombol tersebut.

Kita kembali ke code. Sebelum function onKeyDown, kita tambahkan sebuah konstanta KEYDOWN_ALLOWED_KEYS yang berisikan array. Kemudian kita tambahkan tombol-tombol yang kita perbolehkan di dalam array.

const KEYDOWN_ALLOWED_KEYS = [
  "Control", "Alt", "Shift", "Tab", "ArrowUp", "ArrowDown", "ArrowLeft",
  "ArrowRight", "Home", "End", "PageUp", "PageDown", "Backspace", "Delete"
];

Kemudian di dalam function onKeyDown, kita tambahkan lagi pemeriksaan, apabila tombol yang ditekan adalah salah satu dari isi array, maka untuk saat ini kita tulis saja “Allowed Keys”.

  else if(KEYDOWN_ALLOWED_KEYS.includes(evt.key))
  {
    console.log("Allowed Keys");
  }

Kita simpan dan jalankan di browser. Sekarang kita sudah bisa menggunakan tombol-tombol keyboard untuk melakukan interaksi dengan input debit, seperti untuk menghapus kesalahan, untuk menggeser kursor ke kiri dan ke kanan. Ataupun untuk melakukan seleksi menggunakan keyboard. Apabila masih ada tombol lain yang seharusnya diperbolehkan, teman-teman tinggal menambahkannya ke dalam array.

Nah, pembahasan kita mengenai event keydown sudah selesai. Jadi kita sudah bisa mengubah semua kode console.log menjadi komentar.

Selanjutnya kita lihat kembali ke input debit. Ternyata, cara untuk memasukkan nilai ke input debit, bukan hanya melalui ketikan di keyboard saja. Masih ada beberapa cara lain seperti copy paste, autofill, speech recognition, dan mungkin masih ada cara lainnya. Dan cara-cara lain ini masih belum bisa kita batasi melalui event keydown. Sebagai contoh, misalkan kita ketik nilai abc pada input credit. Lalu kita copy. Dan kita paste ke input debit dengan menggunakan mouse click. Maka nilainya berhasil dimasukkan ke dalam input debit, karena proses ini tidak melalui event keydown.

Oleh karena itu kita harus menambahkan event lainnya untuk melakukan seleksi agar hanya angka saja yang bisa ditambahkan ke dalam input debit. Dalam video ini kita batasi hanya ke cara copy paste dulu saja ya. Pada saat kita melakukan paste, maka browser akan menjalankan dahulu event paste, dan kita masih berkesempatan untuk membatalkan event tersebut.

Sebagai contoh, kita buat dahulu function baru onPaste dengan parameter evt. Isinya kita console.log dahulu nilai dari evt. Lalu di bagian bawah, kita panggil addEventListener untuk menambahkan event paste dengan argument function onPaste.

Kita coba di browser ya. Kita paste ke input debit. Event onPaste dilakukan, dan perlu diperhatikan disini bahwa yang dikirim sebagai argument adalah ClipboardEvent. Jadi berbeda dari event keydown tadi ya. Kalau tadinya yang dikirim adalah KeyboardEvent, sedangkan sekarang yang dikirim adalah ClipboardEvent. Ada beberapa method dan property yang berbeda. Kalau di KeyboardEvent tadi, kita bisa menggunakan property key dan code untuk melihat tombol apa yang sedang di tekan. Pada ClipboardEvent, property tersebut tidak ada. Kalau kita ingin melihat data pada clipboard, maka kita menggunakan property clipboardData. Namun bisa dilihat disini bahwa clipboardData ini adalah sebuah object ya. Untuk mengambil datanya, kita tidak bisa langsung mengakses object tersebut, melainkan harus memanggil method getData.

Kita ganti argument pada console.log menjadi method evt.clipboardData.getData dan sebagai argumentnya adalah “text/plain”. Artinya kita mengambil data clipboard dalam format “text/plain”. Kalau kita jalankan di browser, maka console menuliskan nilai pada clipboard yang akan dipaste ke dalam input.

Kita harus membuat fungsi validasi, untuk memeriksa bahwa semua karakter yang hendak dipaste ini adalah karakter angka. Untuk itu kita lihat kembali ke function onKeyDown. Disini ada pemeriksaan karakter angka ya. Kita keluarkan perintah ini menjadi sebuah function baru yaitu isNumber, dengan parameter char. Kita mengharapkan yang dikirim sebagai argument disini adalah satu buah karakter. Kalau char berada diantara “0” dan “9”, maka kita mengembalikan nilai true. Jika tidak maka kita mengembalikan nilai false. Kita ganti isi onKeyDown, menjadi memanggil fungsi isNumber, dengan argument evt.key.

Kita coba dahulu di browser. Tidak ada error ya. Kita hanya bisa mengisikan angka, tidak bisa mengisi huruf.

Selanjutnya di sebelum function onPaste, kita tambahkan lagi function baru yaitu validateClipboard dengan parameter str. Isinya, kita melakukan looping satu per satu karakter dari string, dan kita periksa apakah nilainya bukan angka. Kalau ada yang bukan angka, maka kita langsung return false. Sedangkan kalau semua karakter adalah angka, maka kita return true.

Kita ganti isi dari onPaste. Jika validateClipboard(evt.clipboardData.getData("text/plain")). Kalau nilainya benar, maka kita tulis clipboard true. Sedangkan kalau salah kita tulis clipboard false.

Kita simpan dan coba dibrowser. Kalau kita paste nilai “abc” maka hasilnya adalah clipboard false. Kalau kita paste nilai “123”, maka hasilnya clipboard true. Kalau kita coba nilai “123a”, artinya salah satu dari karakternya adalah bukan angka, maka hasilnya adalah false.

Kita kembali ke source code. Kita komentari kedua console.log. Lalu pada bagian false, kita panggil method evt.preventDefault(). Artinya kalau ada karakter yang bukan angka, maka kita batalkan peristiwa paste.

Kita coba lagi di browser. Sekarang kalau kita hendak paste nilai “abc”, maka nilai tidak berhasil di-paste. Karena kita memanggil method preventDefault untuk membatalkan paste. Sedangkan kalau kita paste nilai “123”, maka nilai berhasil di-paste.

Kita lanjutkan pembahasan kita ke pemisah ribuan. Kita ingin agar pada saat kita keluar dari input debit, maka angka yang kita masukkan akan dipisahkan berdasarkan ribuan, dengan tujuan agar lebih mudah untuk dibaca. Untuk melakukan hal ini, maka event yang bisa kita gunakan adalah focusout.

Kita buat dahulu satu function baru onFocusOut dengan parameter seperti biasa, yaitu evt. Di dalamnya kita ketik saja console.log(“onFocusOut”). Kemudian kita tambahkan addEventListener(“focusout”, onFocusOut).

Kita coba di browser ya. Kita ketik angka 1 pada input debit. Lalu kita pindah ke credit. Pada saat keluar, maka browser menuliskan onFocusOut di console. Berarti kode sudah berfungsi sesuai yang kita mau.

Kemudian kita ingin mengambil nilai yang disimpan oleh input. Kita bisa mengambilnya dengan menggunakan property value pada element input. Kita ganti ya argument di dalam console.log. Pertama kita ambil dahulu input-nya dengan menggunakan method document.getElementById(“debit”). Kemudian kita panggil property-nya value.

Kita coba lagi di browser ya. Kita coba ketik angka 1 di input debit, setelah kita tekan tombol tab, maka di console keluar tulisan 1. Kalau misalkan kita ganti menjadi angka 2, maka di console keluar angka 2.

Function yang kita buat sudah berfungsi sesuai ekspektasi. Namun ada satu masalah ya. Kalau kita lihat kembali ke dalam function onFocusOut. Disini ada method document.getElementById(“debit”), yang berfungsi untuk mengambil elemen dengan id “debit”. Artinya fungsi ini hanya bisa berjalan untuk id “debit”. Sedangkan kita merancang script kita agar bisa digunakan oleh semua elemen yang menggunakan class “number”. Untuk melihat bagaimana kesalahannya, kita buka halaman HTML. Lalu kita tambahkan class=”number” pada input credit. Kita simpan dan jalankan di browser ya.

Misalkan kita isi 1 pada debit. Lalu kita pindah ke credit, console menuliskan angka 1. Kita coba ketik abc pada credit, tidak berhasil ya. Karena sekarang credit hanya bisa diisi dengan angka. Kita coba ketik angka 2, lalu kita tekan tab. Nah, ternyata yang ditulis di browser adalah angka 1. Karena browser secara spesifik mengambil nilai yang disimpan oleh input debit, bukan nilai yang disimpan oleh elemen yang menjalankan event tersebut.

Kita kembali ke Javascript. Jadi method getElementById disini harus kita ganti menjadi sesuatu yang merujuk ke elemen yang sedang menjalankan event tersebut. Ada 2 cara untuk melakukan hal ini. Yang pertama adalah menggunakan parameter evt. Sedangkan cara kedua yang lebih gampang, adalah menggunakan kata kunci this. Kita bisa mengakses nilai yang disimpan oleh elemen, hanya dengan menuliskan this.value.

Kita coba di browser. Kita refresh. Ketik 1 di debit. Maka keluar angka 1. Kita ketik 2 di credit. Maka yang keluar adalah angka 2. Jadi penggunakan this disini sudah tepat, karena kita bisa mengakses nilai dari masing-masing input.

Tugas kita berikutnya adalah menambahkan thousand separator atau pemisah ribuan pada nilai yang disimpan oleh elemen. Caranya? Pertama, kita buat dahulu variable number, yang nilainya diambil dari this.value. Namun kita ingin number ini menggunakan tipe data number, bukan string, maka kita perlu memanggil function parseInt dan menggunakan this.value sebagai argumentnya.

Kemudian kita ganti nilai dari elemen menjadi number yang sudah ditambahkan thousand separator. Kita bisa menuliskan kodenya seperti ini. this.value =. Artinya kita ingin mengganti nilai dari elemen. Menjadi apa? Nah, kita bisa memanggil method toLocaleString, dengan argument “en-us”. Artinya kita menuliskan angka dengan menggunakan format dari us atau amerika serikat.

Kita coba ya. Kita ketik 1000 di debit. Setelah kita tekan tab, maka tulisannya berubah menjadi 1,000. Ingat, disini kita mengikuti format dari amerika. Sehingga karakter untuk memisahkan ribuannya adalah tanda koma. Jadi hasilnya disini adalah 1,000.

Bagaimana kalau kita ingin mengikuti standart Indonesia? Kita tinggal ganti argument-nya ya. Untuk mengikuti standar Indonesia, maka argumentnya adalah “id-in”. Kalau kita menggunakan standart Indonesia, maka 1000 berubah menjadi 1.000. Untuk contoh disini kita menggunakan standart Amerika ya, jadi argument kita ganti kembali menjadi “en-us”.

Sekarang perhatikan kalau misalkan nilai dari input masih kosong dan kita sudah menekan tombol tab. Maka nilai berubah menjadi NaN. Karena pada saat kita melakukan parseInt, maka nilainya berubah menjadi NaN atau Not a Number. Oleh karena itu kita perlu memeriksa dahulu ya, apakah nilai dari number adalah NaN? Kita bisa memeriksanya dengan cara memanggil fungsi isNaN. Apabila benar, maka nilainya kita isikan dengan “0”. Namun apabila salah, maka kita panggil method toLocaleString.

this.value = isNaN(number) ? "0" : number.toLocaleString("id-in");

Sekarang kita masuk ke masalah baru ya. Kalau misalkan kita ketik 1000 di input debit, maka nilainya berubah menjadi 1,000. Kalau kita kembali ke input debit, kita tidak mengganti apa-apa dan kita tekan tab lagi. Maka nilainya berubah menjadi 1. Mengapa? Karena pada saat kita memanggil parseInt dengan argument “1,000”, maka kita mendapatkan hasil angka 1. Function parseInt hanya bisa memproses karakter angka, tidak bisa memproses karakter huruf dan simbol. Begitu parseInt menjumpai karakter tanda koma, maka parseInt akan mengabaikan semua karakter mulai dari tanda koma dan kebelakangnya.

Untuk mengatasi masalah ini, maka pada saat kita memindahkan fokus ke input, kita harus menghilangkan thousand separatornya. Untuk itu kita bisa menggunakan event focusin.

Pertama kita buat dahulu function removeThousandSeparator dengan parameter str. Fungsi ini bertujuan untuk menghapus semua tanda koma pada parameter str. Caranya gampang ya. Kita bisa memanggil method replaceAll dengan argument “,” dan “”. Artinya kita mengganti semua tanda koma menjadi string kosong. Kita kembalikan hasilnya dengan menggunakan kata kunci return.

Kita bisa coba function kita di console terlebih dahulu ya. Kita coba panggil removeThousandSeparator(“1,000”). Kita mendapatkan hasil 1000. Kalau kita coba lagi menggunakan argument “1,000,000” maka kita mendapatkan 1000000. Fungsi sudah berjalan sesuai dengan yang kita mau.

Selanjutnya kita buat function onFocusIn dengan parameter evt. Isinya kita mengganti nilai dari this.value menjadi removeThousandSeparator(this.value). Lalu kita tambahkan addEventListener(“focusin”, onFocusIn).

Kita coba di browser ya. Kita coba masukkan satu juta di input debit. Tekan tab. Nilainya berubah menjadi 1,000,000. Lalu kita masuk lagi ke input debit. Nilainya kembali menjadi 1000000. Thousand separatornya hilang. Jadi fungsi sudah berjalan seperti yang kita mau.

Sekarang kita masuk ke bagian terakhir dari video ini. Perhatikan bahwa pada halaman kita terdapat tombol submit. Pada saat kita menekan tombol submit, maka angka yang berada di input debit dan input credit akan dikirim ke server dan diproses oleh backend. Kita tidak mau angka yang dikirim ke server ini masih mengandung thousand separator seperti “1,000,000” karena akan mempersulit backend pada saat memproses data tersebut. Jadi kita ingin agar pada saat tombol submit ditekan, maka kita hilangkan dahulu semua thosand separator pada elemen input. Setelah itu barulah nilainya dikirim ke server.

Untuk itu kita bisa menggunakan event submit pada form. Biasanya event submit ini digunakan untuk melakukan validasi terhadap input, namun khusus di video ini kita gunakan untuk menghilangkan thousand separator.

Ada cara gampang untuk mengakses elemen form. Kita lihat di console ya. Kalau kita mengetik document.forms. Maka kita akan mendapatkan semua form yang berada di dalam document kita.

Perhatikan bahwa property forms menggunakan tanda s di bagian akhir, dan hasil yang kita dapat adalah HTMLCollection. Artinya bisa saja document mengandung lebih dari satu form. Jadi untuk menggunakan property forms, kita harus menggunakan looping seperti for of.

Pertama kita buat dahulu function onSubmit ya. Parameternya adalah evt. Isinya adalah. Pertama kita loop dahulu semua element yang mengandung kelas “number”. Kita memanggil method getElementsByClassName bukan dari document ya, melainkan dari kata kunci this. Artinya hanya mengambil element yang berada di dalam form yang bersangkutan. Untuk setiap element, kita ganti property value-nya menjadi hasil dari fungsi removeThousandSeparator. Kemudian kita panggil method evt.preventDefault() agar kita tetap bisa melihat hasilnya di layar.

function onSubmit(evt)
{
  for(el of this.getElementsByClassName("number"))
  {
    el.value = removeThousandSeparator(el.value);
  }
  evt.preventDefault();
}

Kita tambahkan event submit ke semua form yang berada di dalam document. Jadi kita panggil loop for(form of document.forms). Di dalamnya kita panggil method form.addEventListener(“submit”, onSubmit).

for(form of document.forms)
{
  form.addEventListener("submit", onSubmit);
}

Kita simpan dan jalankan di browser. Misalkan kita isi nilai satu juta pada debit, maka nilainya berubah menjadi 1,000,000. Kemudian kita isi nilai seribu pada credit, maka nilainya berubah menjadi 1,000. Pada saat kita tekan tombol submit, maka kedua nilai berubah menjadi 1000000 dan 1000 tanpa thousand separator. Jadi kedua nilai inilah yang akan dikirim ke server, sehingga backend dapat memproses nilainya dengan gampang.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.