Form submit olayı

Formun submit olayını yakalayıp preventDefault ile sayfa yenilenmesini engellemeyi öğrenirsin.

submit olayı

Form gönderildiğinde submit olayı tetiklenir. Bu olayı yakalamak için addEventListener metoduna 'submit' türünü verirsin.

const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  console.log('Gönderildi');
});

Dinleyiciyi düğmeye değil, forma eklersin. Form, Enter tuşu veya gönder düğmesiyle gönderilebilir; her iki durumda da submit olayı çalışır.

preventDefault ile yenilenmeyi engellemek

Submit olayı varsayılan olarak sayfayı yeniden yükler. Bunu engellemek için olay nesnesinin preventDefault metodunu çağırırsın.

form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log('Sayfa yenilenmedi');
});

Bu satırı en başa yazmak en güvenlidir. Böylece form verisiyle JavaScript tarafında çalışabilir, sayfa yenilenmeden sonucu gösterebilirsin.

Uygulama Submit dinleyicisi ekle

form değişkeni bir <form> öğesini gösteriyor. submit olayını dinle, event.preventDefault() çağrısı ile sayfa yenilenmesini engelle ve konsola 'Gönderildi' yazdır.

Örnek çözümü göster

form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log('Gönderildi');
});

Kendini test et

Hangisi form gönderimini yakalar?

const form = document.querySelector('form');
// A
form.addEventListener('click', () => {});
// B
form.addEventListener('submit', () => {});
// C
form.addEventListener('send', () => {});
// D
form.addEventListener('change', () => {});

Cevabı göster

B — Doğru! submit olayı yalnızca form gönderildiğinde tetiklenir.

Terimleri anlamlarıyla eşleştir

submit

Form gönderim olayı
preventDefault()

Sayfa yenilenmesini engeller
event

Olay nesnesi

preventDefault çağrısını tamamla

form.addEventListener('submit', (event) => {
  event.____();
});

Cevabı göster

form.addEventListener('submit', (event) => {
  event.preventDefault();
});

Sıradaki ders: Basit doğrulama

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler