- Konu sahibi
- #1
Form gönderildiğinde tarayıcı varsayılan olarak sayfayı yeniden yükler. Bunu engellemek için formun
Aşağıdaki örnekte
Bu kodu HTML dosyanızdaki formun bulunduğu yere ekleyip sayfayı açın. Ad alanını doldurduktan sonra
Formun yalnızca yenilenmesini engellemek yeterli değilse,
Buradaki
İsteğin sonucunu
Sayfa hâlâ yenileniyorsa önce olay dinleyicisinin gerçekten forma bağlandığını kontrol edin.
Konsolda bu mesaj görünüyorsa olay dinleyicisi çalışıyor demektir. Mesaj görünmüyorsa formun
Tarayıcının yerleşik
submit olayını dinleyip olay nesnesi üzerindeki preventDefault() yöntemini çağırmalısınız. Böylece form verilerini JavaScript ile doğrulayabilir, sunucuya fetch() ile gönderebilir veya yalnızca sayfa yenilenmeden işlem yapabilirsiniz.Form gönderimini durdurma
Aşağıdaki örnekte
submit olayı forma bağlanır. Kullanıcı gönderme düğmesine bastığında ya da Enter tuşunu kullandığında olay çalışır ve event.preventDefault() tarayıcının normal gönderme davranışını iptal eder.
HTML:
<form id="contactForm">
<input id="name" name="name" type="text" placeholder="Adınız" required>
<button type="submit">Gönder</button>
</form>
<p id="message"></p>
<script>
const form = document.querySelector('#contactForm');
const message = document.querySelector('#message');
form.addEventListener('submit', function (event) {
event.preventDefault();
const name = form.elements.name.value.trim();
message.textContent = `${name} adlı kullanıcı için işlem tamamlandı.`;
});
</script>Bu kodu HTML dosyanızdaki formun bulunduğu yere ekleyip sayfayı açın. Ad alanını doldurduktan sonra
Gönder düğmesine bastığınızda sayfa yenilenmez; paragrafta işlem sonucunu belirten mesaj görünür. Formun submit olayını dinlemek, yalnızca düğmenin click olayını dinlemekten daha doğrudur. Çünkü kullanıcı formu Enter tuşuyla da gönderebilir.Form verisini sayfa yenilenmeden sunucuya göndermek
Formun yalnızca yenilenmesini engellemek yeterli değilse,
preventDefault() çağrısından sonra form verilerini fetch() ile sunucuya gönderebilirsiniz. FormData, formdaki name özniteliğine sahip alanları otomatik olarak toplar.
HTML:
<form id="loginForm">
<input name="email" type="email" required>
<input name="password" type="password" required>
<button type="submit">Giriş yap</button>
</form>
<p id="result"></p>
<script>
const loginForm = document.querySelector('#loginForm');
const result = document.querySelector('#result');
loginForm.addEventListener('submit', async function (event) {
event.preventDefault();
const formData = new FormData(loginForm);
result.textContent = 'Gönderiliyor...';
try {
const response = await fetch('/api/login', {
method: 'POST',
body: formData
});
if (!response.ok) {
throw new Error(`İstek başarısız oldu: ${response.status}`);
}
result.textContent = 'İşlem başarıyla tamamlandı.';
} catch (error) {
result.textContent = 'İşlem sırasında bir hata oluştu.';
console.error(error);
}
});
</script>Buradaki
/api/login adresi varsayımsal bir sunucu uç noktasıdır; kendi back-end adresinizle değiştirilmelidir. Sunucu POST isteğini kabul etmiyorsa veya farklı bir veri biçimi bekliyorsa, sayfanın yenilenmemesi yine gerçekleşir ancak istek başarısız olur. Bu iki durum birbirinden farklıdır: sayfanın yenilenmemesi, sunucu işleminin başarıyla tamamlandığını kanıtlamaz.İsteğin sonucunu
response.ok, HTTP durum kodu ve sunucunun döndürdüğü içerikle değerlendirin. Başarılı yanıt alındığında başarı mesajı gösterebilir, formu temizleyebilir veya başka bir sayfaya yönlendirebilirsiniz. Hata durumunda ise kullanıcıya genel bir hata mesajı verip teknik ayrıntıyı geliştirici araçlarının konsolunda inceleyebilirsiniz.Yaygın hatalar ve kontrol edilmesi gerekenler
Sayfa hâlâ yenileniyorsa önce olay dinleyicisinin gerçekten forma bağlandığını kontrol edin.
querySelector() sonucunun null olmaması gerekir; JavaScript kodu form HTML’i oluşturulmadan önce çalışıyorsa kodu sayfanın sonunda çalıştırın veya DOMContentLoaded olayını bekleyin.
JavaScript:
document.addEventListener('DOMContentLoaded', function () {
const form = document.querySelector('#contactForm');
form.addEventListener('submit', function (event) {
event.preventDefault();
console.log('Varsayılan form gönderimi engellendi.');
});
});Konsolda bu mesaj görünüyorsa olay dinleyicisi çalışıyor demektir. Mesaj görünmüyorsa formun
id değeri, JavaScript seçicisi veya scriptin yüklenme sırası kontrol edilmelidir. Ayrıca preventDefault() çağrısının submit işleyicisinin içinde ve form gönderilmeden önce çalıştığından emin olun.Tarayıcının yerleşik
required, type="email" gibi doğrulamalarını kullanıyorsanız, geçersiz alanlarda submit olayı çalışmayabilir. Bu durumda önce alanın neden geçersiz olduğunu düzeltin. Özel doğrulama yapmanız gerekiyorsa alan değerlerini kontrol edin; hata varsa kullanıcıya mesaj gösterip sunucu isteğini başlatmayın. Ancak istemci tarafındaki doğrulama tek başına güvenlik mekanizması değildir; sunucu gelen veriyi ayrıca doğrulamalıdır.