← JavaScript29 / 69

Membaca input dan preventDefault

Form secara default me-refresh halaman saat disubmit — itu perilaku HTML asli. Untuk menanganinya dengan JavaScript, panggil event.preventDefault(). Nilai input dibaca lewat properti .value (selalu berupa string, jadi angka perlu dikonversi dengan Number()).

👀 Contoh dulu

const f = document.querySelector('form');
const kotak = document.querySelector('input');

f.addEventListener('submit', (e) => {
  e.preventDefault();               // tanpa ini halaman refresh
  console.log(kotak.value);         // selalu string
  console.log(Number(kotak.value)); // konversi kalau butuh angka
});

Hasilnya: Saat form disubmit, isi input tampil di output dan halaman tidak berpindah.

💡 input.value SELALU string, bahkan pada type="number". Jadi '5' + 1 menghasilkan '51', bukan 6.

📝 Sekarang giliranmu

Tangani submit form #form: cegah refresh dengan e.preventDefault(), lalu tampilkan nilai #nama lewat .value.

Preview
← SebelumnyaBerikutnya →