FluentStack

Form Submit Dasar

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 4: JavaScript FundamentalsBeginner40 menitBahasa Indonesia

Form Submit Dasar

Belajar menangani submit form, mencegah reload default, dan membaca value input.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memahami submit event pada form
  • Memakai event.preventDefault agar halaman tidak reload
  • Menampilkan hasil input setelah form dikirim
JavaScriptFormsSubmit

Isi lesson

6 blok
  1. 1.
    Form punya event khususBelum selesaiWajib
  2. 2.
    Cegah reload sebelum mengolah inputBelum selesaiWajib
  3. 3.
    Submit form sederhanaBelum selesaiWajib
  4. 4.
    Lupa preventDefault membuat hasil cepat hilangBelum selesaiWajib
  5. 5.
    Coding practiceBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Form punya event khusus

Wajib

Tombol bisa memakai click, tetapi form biasanya lebih tepat memakai submit. Submit bisa terjadi saat user klik tombol submit atau menekan Enter di input. Karena itu, JavaScript form biasanya dipasang di elemen form, bukan hanya di tombol.

Bagian ini memengaruhi progres lesson.

Cegah reload sebelum mengolah input

Wajib

Browser punya behavior bawaan saat form dikirim: halaman bisa reload atau berpindah. Untuk form latihan di browser, kamu biasanya memakai event.preventDefault agar halaman tetap di tempat. Setelah itu, JavaScript bisa membaca input.value dan menampilkan hasilnya.

Bagian ini memengaruhi progres lesson.

Submit form sederhana

Wajib
js
const noteForm = document.querySelector("#noteForm");
const noteInput = document.querySelector("#noteInput");
const resultText = document.querySelector("#resultText");

noteForm.addEventListener("submit", (event) => {
  event.preventDefault();
  resultText.textContent = "Catatan: " + noteInput.value;
});

event.preventDefault mencegah behavior bawaan form. Setelah itu, noteInput.value dibaca dan ditampilkan ke resultText.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Wajib

Lupa preventDefault membuat hasil cepat hilang

Kalau halaman reload setelah submit, perubahan teks yang baru dibuat JavaScript bisa hilang. Untuk latihan form di halaman yang sama, biasakan panggil event.preventDefault di awal submit handler.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Menangani submit form

Latihan mencegah reload form dan menampilkan value input di halaman.

Tujuan awal: Fokus di tab JS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

4 cek otomatis3 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • Submit event cocok untuk menangani form.
  • event.preventDefault mencegah reload bawaan browser.
  • Setelah submit dicegah, JavaScript bisa membaca value dan memperbarui UI.
  • Berikutnya, kamu akan menyimpan value kecil dengan localStorage.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Form punya event khusus.

Memuat progresReview module