Cara Mengatasi Submit Event Reload Halaman Javascript tanpa Gagal

Ditulis oleh JavaScript

Cara mengatasi submit event reload halaman javascript adalah memanggil event.preventDefault() di baris pertama listener submit. Browser memang mengirim form ke URL pada atribut action, lalu memuat ulang halaman. Kalau baris ini terlewat, kode validasi atau fetch sesudahnya ikut terbuang karena halaman keburu reload.

Kenapa Submit Form Selalu Reload Halaman

Secara default, browser memperlakukan tombol submit dan tombol Enter di dalam form sebagai perintah navigasi. Form membaca atribut action dan method, lalu membuat HTTP request baru.

Kalau action kosong atau tidak ditulis, browser mengirim ulang ke URL yang sama. Hasilnya terlihat seperti halaman berkedip dan input kembali kosong. Ini bukan selalu bug, melainkan perilaku normal yang belum dicegah.

Kondisi | Penyebab | Solusi Cepat

Kondisi | Penyebab | Solusi

Klik submit langsung reload | Listener tidak memanggil preventDefault | Tambahkan e.preventDefault() di event submit
Tekan Enter tetap reload | Enter memicu submit form, bukan klik tombol | Pasang listener pada form, bukan pada tombol
fetch tidak terkirim | Reload memotong request async | Cegah reload dulu, baru jalankan fetch

BACA JUGA:

Cara Memperbaiki Submit Agar Tidak Reload

Ikuti urutan ini di JavaScript browser:

1. Ambil elemen form dengan document.querySelector.
2. Pasang form.addEventListener("submit", ...).
3. Panggil event.preventDefault() paling awal.
4. Ambil data memakai new FormData(form).
5. Lanjutkan validasi, tampilkan pesan, atau kirim fetch.

Salah:

form.addEventListener("submit", (e) => {
  kirimData();
});

Benar:

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const data = new FormData(form);
  kirimData(data);
});

Perhatikan juga jenis tombol. Tombol type="submit" memicu event submit form. Tombol type="button" tidak memicu submit, cocok untuk tombol batal atau tutup modal.

Cara Mencegah Reload Terulang

  • Letakkan script setelah elemen form atau tunggu event DOMContentLoaded agar form sudah tersedia.
  • Periksa listener ganda karena form yang dipasang dua listener submit bisa berjalan dua kali.
  • Gunakan ID form yang unik supaya selector tidak menangkap form lain.
  • Tampilkan pesan error memakai textContent karena lebih aman untuk teks biasa daripada innerHTML.

FAQ

Apakah preventDefault wajib di setiap form?

Tidak, hanya wajib kalau submit ditangani JavaScript seperti validasi atau fetch.

Kenapa fetch tidak terkirim saat submit ditekan?

Halaman reload sebelum request selesai, jadi cegah reload dulu lalu periksa response.ok.

Tombol enter tetap reload padahal sudah ada tombol batal?

Ubah tombol batal menjadi type="button" dan tangani validasi pada event submit form.

Artikel Terkait