Ambil Data Form dengan Cara Mendapatkan Value dari Event Target Javascript

Ditulis oleh JavaScript

Cara mendapatkan value dari event target JavaScript adalah membaca e.target.value di dalam fungsi handler event. Pasang listener pada input dengan addEventListener("input", handler), lalu ambil datanya lewat parameter event. Pola ini bekerja untuk teks, number, select, dan textarea.

Cara Kerja e.target.value di Browser

Browser mengirim objek event ke setiap handler. Objek itu membawa informasi elemen mana yang memicu event.

  • e.target menunjuk elemen yang memicu event, misalnya kotak input yang sedang diketik.
  • value membaca isi elemen form seperti input, select, dan textarea.
  • Pola ini umum dipakai pada event input, change, dan submit.

Langkah Mendapatkan Value dari Event Target

Kesalahan yang sering terjadi adalah membaca value di luar handler sehingga isinya masih kosong atau basi.

1. Pasang addEventListener pada input atau form setelah DOM tersedia.
2. Ambil e.target.value di dalam handler, bukan di luar.
3. Tangani checkbox, radio, dan select dengan properti yang sesuai.

const namaInput = document.querySelector("#nama");

namaInput.addEventListener("input", (e) => {
  console.log(e.target.value);
});

const kotaSelect = document.querySelector("#kota");

kotaSelect.addEventListener("change", (e) => {
  console.log(e.target.value);
});

Contoh pertama mencetak teks setiap pengguna mengetik. Contoh kedua mencetak option terpilih setiap pilihan berubah.

BACA JUGA:

Perbedaan e.target dan e.currentTarget

Pada form dengan banyak tombol atau input dinamis, dua properti ini sering tertukar.

  • e.target bisa berupa elemen anak saat event bubbling, misalnya span di dalam button.
  • e.currentTarget selalu menunjuk elemen tempat listener dipasang.
  • Untuk event delegation, gunakan e.target.closest("button") sebelum membaca data.

Tabel Pola Value Berdasarkan Jenis Input

Jangan memakai value saja untuk checkbox tanpa memeriksa checked.

Jenis Input Properti Dibaca Catatan
Text, number, textarea value Gunakan event input
Select value Gunakan event change
Checkbox checked dan value Periksa checked dahulu
Radio checked dan value Ambil radio terpilih
File files Akses files[0] untuk satu berkas

FAQ

Kenapa e.target.value undefined?

Elemen pemicu kemungkinan bukan input, misalnya div atau button, sehingga tidak memiliki properti value.

Kapan pakai e.target vs e.currentTarget?

Pakai e.target untuk mengetahui sumber event, pakai e.currentTarget untuk elemen tempat listener dipasang.

Bagaimana ambil value banyak input dalam form?

Gunakan event submit lalu baca semua field lewat FormData atau querySelector per nama input.

Artikel Terkait