submit Olayı
Form gönderimini yönetin ve yeniden yüklemeleri önleyin.
submit Olayı, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.
Form Gönderme
submit olayı, bir form gönderme düğmesine tıklanarak veya bir alanda Enter tuşuna basılarak gönderildiğinde tetiklenir. Form verilerini işlemek için doğru yer burasıdır.
Formu Dinleme
Dinleyiciyi gönderme düğmesine değil, doğrudan form öğesine ekleyin; böylece tüm gönderme yolları kapsanır.
const form = document.querySelector("#signup");
form.addEventListener("submit", (e) => {
console.log("submitting");
});Varsayılan Yenileme
Varsayılan olarak gönderme, sayfada gezinmeye veya sayfanın yeniden yüklenmesine neden olur. JavaScript ile çalışan uygulamalarda genellikle bunu iptal edersiniz.
form.addEventListener("submit", (e) => {
e.preventDefault();
});Burada preventDefault Neden Kullanılır
preventDefault çağrısı, doğrulama yapıp verileri çoğu zaman fetch aracılığıyla kendiniz gönderebilmeniz için sayfanın yerinde kalmasını sağlar.
form.addEventListener("submit", (e) => {
e.preventDefault();
const data = new FormData(form);
// send data without reloading
});Gönderme Düğmeleri
type="submit" değerine sahip bir button, form içindeki varsayılan davranış olarak gönderme işlemini başlatır. Gönderme yapmaması gereken düğmeler için type="button" kullanın.
Enter Tuşu Gönderir
Tek satırlı bir metin alanında Enter tuşuna basmak formu gönderir; bu nedenle formu dinlemek çok önemlidir.
requestSubmit
form.requestSubmit, gönderme olayını yine tetikleyip doğrulamayı çalıştırarak programlı gönderme yapar. Buna karşılık form.submit her ikisini de atlar.
form.requestSubmit(); // fires submit event + validates
// form.submit(); // bypasses validation and the eventGönderme Sırasında Verileri Okuma
İşleyicinin içinde, adlandırılmış tüm alanları düzenli biçimde toplamak için formdan bir FormData oluşturun.
form.addEventListener("submit", (e) => {
e.preventDefault();
const fd = new FormData(form);
const obj = Object.fromEntries(fd.entries());
console.log(obj);
});Düğmeyi Devre Dışı Bırakma
Çift gönderimi önlemek için işlem sırasında gönderme düğmesini devre dışı bırakın, ardından işlem tamamlandığında yeniden etkinleştirin.
form.addEventListener("submit", (e) => {
e.preventDefault();
const btn = form.querySelector("[type=submit]");
btn.disabled = true;
});Formu Sıfırlama
form.reset, alanları varsayılan değerlerine döndürerek temizler; reset olayı da bu duruma tepki vermenizi sağlar.
form.addEventListener("reset", () => {
console.log("cleared");
});Gönderen Öğe
Gönderme olayının submitter özelliği, olayı hangi düğmenin tetiklediğini belirtir. Bu, bir formda birden çok gönderme düğmesi olduğunda kullanışlıdır.
form.addEventListener("submit", (e) => {
console.log(e.submitter && e.submitter.value);
});Hızlı Kontrol
En iyi uygulamayı seçin.
Özet
Göndermeleri formun submit olayıyla işleyin ve JavaScript ile çalışan uygulamalarda preventDefault çağrısını kullanın. Enter tuşuyla yapılan göndermeleri yakalamak için düğmeyi değil formu dinleyin. Alanları okumak için FormData, doğrulamayla birlikte programlı gönderim için requestSubmit kullanın ve çift gönderimleri önlemek için düğmeyi devre dışı bırakın.
Sıkça Sorulan Sorular
“submit Olayı” dersi ücretsiz mi?
Evet — “submit Olayı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.
“submit Olayı” dersinde ne öğreneceğim?
Form gönderimini yönetin ve yeniden yüklemeleri önleyin. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“submit Olayı” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.