JavaScript Academy · Pelajaran

Peristiwa submit

Tangani pengiriman formulir dan cegah pemuatan ulang.

Peristiwa submit adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Mengirim Formulir

Peristiwa submit dipicu saat formulir dikirim, baik dengan mengeklik tombol kirim maupun menekan Enter di sebuah kolom. Inilah tempat yang tepat untuk menangani data formulir.

Mendengarkan pada Formulir

Pasang pendengar pada elemen form itu sendiri, bukan pada tombol kirim, agar semua jalur pengiriman tercakup.

const form = document.querySelector("#signup");
form.addEventListener("submit", (e) => {
  console.log("submitting");
});

Pemuatan Ulang Bawaan

Secara bawaan, pengiriman akan berpindah ke halaman lain atau memuat ulang halaman. Untuk aplikasi yang digerakkan oleh JavaScript, biasanya Anda membatalkan perilaku ini.

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

Alasan Menggunakan preventDefault di Sini

Memanggil preventDefault membuat halaman tetap berada di tempatnya sehingga Anda dapat memvalidasi dan mengirim data sendiri, sering kali melalui fetch.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const data = new FormData(form);
  // send data without reloading
});

Tombol Kirim

button dengan type="submit" (bawaan di dalam formulir) memicu pengiriman. Gunakan type="button" untuk tombol yang tidak boleh mengirim formulir.

Tombol Enter Mengirim Formulir

Menekan Enter di kolom teks satu baris akan mengirim formulir. Karena itu, mendengarkan pada formulir sangat penting.

requestSubmit

form.requestSubmit mengirim formulir secara terprogram sambil tetap memicu peristiwa submit dan menjalankan validasi, berbeda dengan form.submit yang melewati keduanya.

form.requestSubmit(); // fires submit event + validates
// form.submit(); // bypasses validation and the event

Membaca Data saat Submit

Di dalam penangan, buat FormData dari formulir untuk mengumpulkan semua kolom bernama dengan rapi.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const fd = new FormData(form);
  const obj = Object.fromEntries(fd.entries());
  console.log(obj);
});

Menonaktifkan Tombol

Untuk mencegah pengiriman ganda, nonaktifkan tombol kirim selama pemrosesan, lalu aktifkan kembali setelah selesai.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const btn = form.querySelector("[type=submit]");
  btn.disabled = true;
});

Mengatur Ulang Formulir

form.reset menghapus isi kolom dan mengembalikannya ke nilai bawaan, sedangkan peristiwa reset memungkinkan Anda memberikan respons.

form.addEventListener("reset", () => {
  console.log("cleared");
});

Elemen Submitter

Properti submitter pada peristiwa submit menunjukkan tombol yang memicunya, sehingga berguna saat formulir memiliki beberapa tombol kirim.

form.addEventListener("submit", (e) => {
  console.log(e.submitter && e.submitter.value);
});

Pemeriksaan Cepat

Pilih praktik terbaik.

Ringkasan

Tangani pengiriman dengan peristiwa submit pada formulir, dan panggil preventDefault untuk aplikasi yang digerakkan oleh JS. Dengarkan pada formulir (bukan tombol) untuk menangkap pengiriman melalui tombol Enter. Gunakan FormData untuk membaca kolom, requestSubmit untuk mengirim secara terprogram dengan validasi, dan nonaktifkan tombol untuk mencegah pengiriman ganda.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Peristiwa submit” gratis?

Ya — teks lengkap “Peristiwa submit” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Peristiwa submit”?

Tangani pengiriman formulir dan cegah pemuatan ulang. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Peristiwa submit” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy