JavaScript Form Submit Sayfası Neden Yenilenir?

JavaScript form submit işleminde sayfanın yenilenmesinin nedeni, tarayıcının formu göndermeyi varsayılan bir görev olarak kabul etmesidir. Kullanıcı gönder düğmesine bastığında tarayıcı form verilerini hedef adrese iletmeye ve gelen yanıtı yüklemeye çalışır; bu nedenle mevcut sayfa yenilenmiş gibi görünür.

Bir submit olay dinleyicisi eklemek bu davranışı kendiliğinden durdurmaz. Yenilenmeyi engellemek için callback fonksiyonuna gelen event nesnesi üzerinden event.preventDefault() çağrılmalıdır.

Form Gönderilince Sayfa Neden Yenilenir?

HTML formunun temel görevi, kullanıcının girdiği bilgileri göndermektir. Form gönderildiğinde tarayıcı, action niteliğinde belirtilen hedefe gitmeye çalışır. method niteliği ise verilerin hangi gönderim yöntemiyle iletileceğini belirtir.

Örneğin aşağıdaki formda kullanıcı düğmeye bastığında tarayıcının varsayılan gönderim süreci başlar:

<form action="" method="get">
  <input type="text" name="isim">
  <button type="submit">Gönder</button>
</form>

action="" kullanıldığında hedef mevcut sayfadır. Bu nedenle tarayıcı aynı sayfayı yeniden yükleyebilir. method="get" kullanılıyorsa girilen değer adres çubuğundaki sorgu parametrelerine de eklenebilir. Buradaki yenilenme, JavaScript hatasından değil formun varsayılan tarayıcı davranışından kaynaklanır.

Forma bir JavaScript olay dinleyicisi eklemek yalnızca gönderim girişiminden haberdar olmanızı sağlar. Dinleyici içindeki kod çalışsa bile tarayıcı, ayrıca engellenmediği sürece kendi gönderim işlemini sürdürür. Ana çözüm, formun submit callback’i içinde event.preventDefault() metodunu çağırmaktır.

submit Event, event Nesnesi ve preventDefault() Nasıl Çalışır?

submit olayı, form gönderilmeye çalışıldığında tetiklenir. Bu olay yalnızca gönder düğmesine tıklamayla sınırlı değildir; kullanıcı uygun bir form alanındayken Enter tuşuna bastığında da oluşabilir. Bu nedenle dinleyiciyi yalnızca düğmeye değil, doğrudan forma bağlamak daha tutarlı bir yaklaşımdır.

addEventListener(), forma belirli bir olay gerçekleştiğinde çalışacak callback fonksiyonunu bağlar. Callback’e gelen event nesnesi ise gerçekleşen olayla ilgili bilgileri ve olayı kontrol etmekte kullanabileceğiniz metotları taşır.

1. Önce preventDefault() kullanmadan formu gönderin ve sayfanın yenilenmesini gözlemleyin.
2. Callback içine console.log("Submit olayı çalıştı"); ekleyerek olay dinleyicisinin tetiklendiğini doğrulayın.
3. event.preventDefault() ekledikten sonra yenilenmenin durduğunu ve callback içindeki sonraki komutların çalıştığını kontrol edin.

Bu akışta preventDefault() callback fonksiyonunun içinde çağrılır; çünkü engellenmek istenen davranış, callback’e iletilen event nesnesinin temsil ettiği gönderim olayıdır. Temel olay mantığını benzer uygulamalarla tekrar etmek isteyenler, Berk Akademi video eğitimleri üzerinden kendi çalışma hızına uygun bir öğrenme akışı oluşturabilir.

Önemli ayrım şudur: event.preventDefault() yalnızca tarayıcının varsayılan form gönderimini engeller. Form verisini otomatik olarak kaydetmez, işlemez veya başka bir yere göndermez. Bu işlemler için gerekli JavaScript kodunun ayrıca yazılması gerekir.

Yenilenen ve Düzeltilen İsim Formu: Çalışan Kod Örneği

Önce formun varsayılan davranışını görelim. Aşağıdaki sürümde JavaScript bir submit olayını dinlese de preventDefault() kullanılmadığı için tarayıcı formu normal şekilde gönderir ve sayfa yenilenir.

<form id="nameForm">
  <label for="name">Adınız:</label>
  <input id="name" name="name" type="text" required>
  <button type="submit">Gönder</button>
</form>

<script>
  const form = document.querySelector("#nameForm");
  form.addEventListener("submit", () => {
    console.log("submit listener çalıştı");
  });
</script>

İsminizi yazıp düğmeye bastığınızda önce konsolda submit listener çalıştı mesajını görebilirsiniz. Ardından formun varsayılan gönderme işlemi devam eder ve sayfa yenilenir. Bu, listener'ın çalışmadığı anlamına gelmez; yalnızca tarayıcının varsayılan davranışının durdurulmadığını gösterir.

Düzeltilmiş sürümde önce listener log'unu doğrular, sonra varsayılan gönderimi durdurur ve form verisini FormData ile okuruz:

const form = document.querySelector("#nameForm");
const message = document.querySelector("#message");

form.addEventListener("submit", (event) => {
  console.log("submit listener çalıştı");
  event.preventDefault();

  const formData = new FormData(form);
  console.log("İsim:", formData.get("name"));

  message.textContent = "Form başarıyla işlendi.";
});

Bu JavaScript'in çalışması için forma şu mesaj alanını da ekleyin:

<p id="message"></p>

Beklenen sonuç, sayfanın yenilenmemesi ve sayfada “Form başarıyla işlendi.” mesajının görünmesidir. Konsolda ise önce submit listener çalıştı, ardından örneğin İsim: Ayşe çıktısı görülür. FormData, yalnızca name niteliği bulunan form alanlarını anahtar-değer biçiminde okumaya yardımcı olur.

Burada önemli bir sınır vardır: preventDefault() form verisini otomatik olarak kaydetmez veya bir sunucuya göndermez. Sadece tarayıcının varsayılan gönderme ve sayfa yenileme işlemini durdurur. Bu örnekte veri konsolda incelenmektedir.

button type, required ve FormData ile Form Davranışını Kontrol Etme

Form davranışını teşhis ederken düğmenin türünü, alanların doğrulama kurallarını ve verinin nasıl okunduğunu ayrı ayrı kontrol etmek gerekir. type="submit" form gönderimini başlatır; type="button" ise tek başına form göndermez.

required alan boş bırakıldığında tarayıcı yerleşik doğrulama uyarısı gösterir ve gönderim akışı beklediğiniz şekilde ilerlemeyebilir; bu durum preventDefault() eksikliğiyle karıştırılmamalıdır. MDN Web Docs submit event açıklaması da geçersiz formda submit olayının oluşmayabileceğini belirtir.

Bu nedenle üç adımı izleyin: Önce boş ve dolu formda yenileme davranışını gözlemleyin, ardından listener içine console.log koyun, son olarak event.preventDefault() sonrasında new FormData(form) ile get("name") çıktısını kontrol edin.

Form Verisinden Sonra Başarı veya Hata Mesajı Nasıl Gösterilir?

preventDefault() çağrıldığında akış durmakla bitmez. Bu metot yalnızca tarayıcının varsayılan form gönderme davranışını, yani sayfanın yenilenmesini veya formun normal şekilde gönderilmesini engeller. JavaScript daha sonra FormData ile aldığı değerleri kontrol ederek kullanıcıya formun durumunu açıklayan bir mesaj gösterebilir.

Örneğin isim alanı boşsa formun yakınındaki hata mesajına “Lütfen adınızı girin.” yazılabilir. İsim alındığında ise başarı alanı güncellenebilir. Bunun için mesaj gösterecek bir HTML elementi önceden hazırlanır ve her gönderim denemesinde eski mesaj temizlenir. Böylece kullanıcı ikinci kez denediğinde ilk denemeden kalan hata veya başarı metni ekranda kalmaz.

form.addEventListener("submit", function (event) {
  event.preventDefault();

  mesaj.textContent = "";

  const veri = new FormData(form);
  const isim = veri.get("isim");

  if (!isim || isim.trim() === "") {
    mesaj.textContent = "Lütfen adınızı girin.";
    return;
  }

  mesaj.textContent = `Teşekkürler, ${isim}! Form kontrol edildi.`;
});

Bu örnekte mesaj.textContent = "" satırı her yeni denemeden önce önceki bildirimi temizler. Ardından FormData içindeki isim değeri kontrol edilir. Değer yoksa hata mesajı gösterilir ve return ile başarı mesajına geçilmez. Değer varsa kullanıcıya anlaşılır bir geri bildirim verilir. Yalnızca console.log() kullanmak geliştirici için yararlı olsa da formu dolduran kişi sonucu doğrudan sayfa üzerinde görmelidir.

Buradaki başarı mesajı, verinin kalıcı olarak kaydedildiği anlamına gelmez. preventDefault() ve FormData yalnızca istemci tarafındaki akışı yönetir. Veriyi bir dosyaya, veritabanına veya uzak bir servise kaydetmek için ayrıca uygun bir sunucu ya da veri saklama mekanizması gerekir. Bu temel akışları canlı sınıf ortamında eğitmen desteğiyle pekiştirmek isteyenler Berk Akademi canlı yazılım eğitimleri hakkında bilgi edinebilir.

Üç Adımlı Teşhis Kontrol Listesi ve Sık Hatalar

Form beklenmedik şekilde yenileniyor veya mesaj görünmüyorsa sorunu aşağıdaki sırayla incelemek daha hızlı sonuç verir. Her adım bir öncekinin çalıştığını doğrulamaya dayanır.

1. Varsayılan davranışı gözlemleyin: Form gönderildiğinde sayfa yenileniyor mu, yoksa tarayıcı HTML doğrulaması nedeniyle gönderimi durduruyor mu? button elementinin gerçekten type="submit" olduğundan ve form alanlarının uygun şekilde yerleştirildiğinden emin olun.
2. Olay dinleyicisini doğrulayın: Submit callback fonksiyonunun ilk satırına geçici bir console.log("submit çalıştı") ekleyin. Mesaj konsolda görünmüyorsa listener forma bağlanmamış, yanlış element seçilmiş veya callback hiç çalışmamış olabilir. Callback’in event parametresini alıp almadığını da kontrol edin.
3. Varsayılan davranışı durdurup sonucu kontrol edin: event.preventDefault() çağrısı callback fonksiyonunun içinde bulunmalıdır. Daha sonra FormData değerlerinin okunup okunmadığını ve başarı mesajının gerçekten textContent ile güncellenip güncellenmediğini inceleyin.

Sık karşılaşılan hatalardan biri preventDefault() çağrısını olay fonksiyonunun dışına yazmaktır. Bu durumda kullanılacak event nesnesi yoktur. Callback’e event parametresi verilmemesi de aynı soruna yol açar. Ayrıca type="button" kullanılan bir düğmeden submit olayı beklemek yanlıştır; bu tür düğme varsayılan olarak form göndermez.

FormData yalnızca name niteliği bulunan alanları anlamlı biçimde alır. Bu nedenle <input id="isim"> tek başına yeterli değildir; form verisinde kullanılacak alanın name="isim" gibi bir niteliği olmalıdır. required alanlar boş bırakıldığında tarayıcı doğrulaması submit callback’inden önce devreye girebilir. Son olarak preventDefault() bir kayıt işlemi değil, yalnızca varsayılan gönderme davranışını durduran bir metottur.

Sık Sorulan Sorular

preventDefault() form verilerini otomatik olarak kaydeder mi?

Hayır. preventDefault() yalnızca tarayıcının varsayılan form davranışını engeller. FormData ise alan değerlerini istemci tarafında okumaya yarar; veriyi kalıcı olarak kaydetmez.

event.preventDefault() neden submit callback fonksiyonunun içinde yazılır?

Çünkü event nesnesi, gerçekleşen submit olayının callback fonksiyonuna gönderilir. Bu nesneye erişip varsayılan davranışı durdurabilmek için çağrı, event parametresinin bulunduğu fonksiyonun içinde yapılmalıdır.

button type="submit" ile type="button" arasındaki fark nedir?

type="submit" olan düğme formun submit olayını tetikler. type="button" olan düğme ise yalnızca normal bir düğmedir ve JavaScript ile ayrıca işlem tanımlanmadıkça form gönderme akışını başlatmaz.

required alan boşken submit olayındaki JavaScript kodu neden beklediğim gibi çalışmıyor?

Tarayıcının yerleşik HTML doğrulaması, required alan geçersizken submit akışını callback’e ulaşmadan durdurabilir. Bu nedenle alanın geçerli bir değer alıp almadığını ve tarayıcının gösterdiği doğrulama uyarısını kontrol etmek gerekir.

Form submit davranışını doğru anlamanın temel yolu, tarayıcının varsayılan hareketini JavaScript kodundan ayırmak ve her aşamayı küçük kontrollerle doğrulamaktır.