Memilih Cara Mengambil Nilai Input di jQuery: val(), attr(), atau

Kamu menekan tombol simpan di form pendaftaran, lalu menyadari kolom centang “setuju syarat” selalu terbaca kosong meski sudah dicentang. Kode mengambil nilainya dengan .attr('checked'). Masalahnya ada pada metode yang dipilih. jQuery punya beberapa cara membaca nilai input, dan masing-masing bekerja pada lapisan yang berbeda.

Ada tiga pilihan yang paling sering muncul: .val(), .attr(), dan .prop(). Setelah membaca, kamu bisa menebak dengan cepat metode mana yang cocok untuk jenis input tertentu.

Kenapa cara mengambil nilai input dengan jQuery perlu dipilih dengan tepat

Input di HTML punya dua hal yang sering tertukar: atribut yang ditulis di markup dan properti yang hidup di DOM. Atribut adalah yang kamu tulis di HTML, misalnya value="Budi". Properti adalah nilai yang berubah saat pengguna berinteraksi dengan elemen.

Ketika pengguna mengetik di kolom teks, nilai di layar berubah, tetapi atribut value di markup tetap seperti semula. .attr('value') membaca markup itu, sedangkan .val() membaca nilai yang sedang aktif. Untuk checkbox, perbedaannya lebih tajam: .attr('checked') mengembalikan string awal dari markup, sementara .prop('checked') mengembalikan boolean sesuai kondisi kotak saat itu.

Ringkasan perbandingan tiga metode

Memakai .val() untuk kolom teks dan pilihan

.val() dirancang khusus untuk elemen form. Ia membaca apa yang sedang tampil di kolom, termasuk hasil ketikan pengguna. Untuk <select>, metode ini mengembalikan value dari opsi yang dipilih. Untuk grup radio, ia mengambil nilai dari tombol yang aktif.

const nama = $('#nama').val();
const kota = $('#kota').val();
console.log(nama, kota);

Kalau elemen yang dipilih lebih dari satu, .val() mengembalikan array berisi nilai tiap elemen. Ini berguna saat membaca sekumpulan checkbox yang dicentang dalam satu grup, misalnya pilihan minat pada formulir.

Untuk menyimpan nilai baru, cukup panggil .val('isi baru'). Perubahan langsung terlihat di layar tanpa perlu menyentuh atribut di markup. Pola ini juga berguna saat kamu mengisi ulang form setelah mengambil data lewat AJAX, misalnya pada panduan memilih metode AJAX jQuery.

Memakai .prop() untuk kondisi checkbox dan disabled

Sejak jQuery 1.6, .prop() menjadi cara resmi membaca properti yang nilainya berubah karena interaksi. Checkbox, radio, dan tombol disabled termasuk di dalamnya. Nilai yang dikembalikan berupa boolean, jadi kamu bisa langsung memakainya dalam percabangan.

if ($('#setuju').prop('checked')) {
  aktifkanTombolSimpan();
}

Membaca .attr('checked') pada checkbox yang dicentang pengguna akan mengembalikan undefined jika atribut itu tidak ditulis di HTML. Inilah sumber bug yang disebut di awal. Kalau kamu perlu menonaktifkan tombol, gunakan .prop('disabled', true) agar kondisinya konsisten dengan status DOM.

Memakai .attr() untuk data yang tidak berubah

.attr() tetap berguna untuk atribut yang memang statis, seperti href, src, title, atau data-*. Nilai ini biasanya ditulis sekali di markup dan tidak berubah karena ketikan pengguna.

const tautan = $('.kartu a').attr('href');
const idProduk = $('.kartu').attr('data-id');

Ada satu jebakan: .attr() mengembalikan string. Untuk atribut yang ditulis sebagai boolean di HTML lama, hasilnya bisa mengejutkan jika kamu membandingkannya dengan true. Karena itu, jangan pakai .attr() untuk membaca status interaktif.

Saat kamu menambahkan elemen baru lewat skrip, atribut data-* sering perlu dipasang bersamaan. Teknik penyisipan elemen dijelaskan lebih rinci di memilih metode untuk menambahkan elemen baru ke DOM.

Membaca nilai dari form yang dibuat dinamis

Form yang dihasilkan dari templat atau respons server sering punya banyak elemen serupa. Alih-alih memanggil .val() satu per satu, kumpulkan lewat .each() atau .map(). Pola ini juga membantu ketika kamu perlu mereset nilai setelah pengiriman.

const data = {};
$('#form-pendaftaran').find('input, select').each(function () {
  const $el = $(this);
  if ($el.attr('type') === 'checkbox') {
    data[$el.attr('name')] = $el.prop('checked');
  } else {
    data[$el.attr('name')] = $el.val();
  }
});
console.log(data);

Perhatikan bahwa nama kolom diambil dengan .attr('name') karena atribut itu tidak berubah, sedangkan nilainya diambil dengan .val() atau .prop() sesuai jenis input. Membedakan dua lapisan ini membuat kode lebih mudah dirawat.

Kalau objek hasil kumpulan data ini akan digabung dengan pengaturan lain, kamu perlu berhati-hati saat menyalinnya. Penjelasan soal shallow vs deep copy di JavaScript membantu menghindari perubahan tak sengaja pada objek asli.

Kesalahan umum dan cara menghindarinya

• Memakai .attr('checked') untuk membaca checkbox. Ganti dengan .prop('checked').
• Memakai .val() pada elemen non-form seperti <div>. Metode ini tidak membaca teks di dalamnya; gunakan .text().
• Membandingkan hasil .attr('value') dengan angka tanpa konversi. Hasilnya string, jadi '10' tidak sama dengan 10.
• Lupa bahwa .val() pada beberapa elemen mengembalikan array, lalu memakai hasilnya seolah string tunggal.

Menghindari empat hal di atas sudah menutup sebagian besar bug form yang muncul di proyek jQuery. Sisanya biasanya soal event: pastikan handler tidak terpasang berulang saat form dirender ulang. Cara membersihkan handler lama dibahas di mencegah event ganda dengan .off() dan .one().

Di sela mengerjakan proyek, sebagian orang mencari hiburan dengan menonton pertandingan. Kalau kamu termasuk penikmat basket, sepakbola, atau UFC, ada komunitas yang menyediakan tarkamlive sebagai tempat nonton bareng gratis dengan host yang menghibur. Anggap saja ini jeda sebelum kembali mengecek bug form berikutnya.

Ringkasan

Untuk kolom teks, textarea, dan select, pakai .val(). Untuk checkbox, radio, dan properti yang berubah karena interaksi, pakai .prop(). Untuk atribut statis seperti href atau data-*, pakai .attr(). Memilih metode sesuai jenis elemen membuat nilai form terbaca konsisten, baik saat halaman baru dimuat maupun setelah pengguna mengubah isinya.

Pertanyaan yang Sering Diajukan

Apakah .val() bisa dipakai untuk membaca isi checkbox?

Bisa, tetapi hasilnya nilai dari atribut value, bukan status centang. Untuk mengetahui apakah kotak dicentang, gunakan .prop('checked').

Kenapa .attr(‘value’) tidak berubah setelah pengguna mengetik?

Karena .attr() membaca atribut di markup HTML, yang tidak ikut berubah saat pengguna mengetik. Nilai aktif di kolom dibaca lewat .val().

Apakah .prop() bisa dipakai untuk semua atribut?

Tidak. .prop() paling tepat untuk properti DOM yang berupa boolean atau objek, seperti checked, disabled, dan selected. Untuk atribut teks biasa, tetap gunakan .attr().