Form Butonu Üst Üste Tıklanmayı Kapatma
Form Gönder Butonuna Tıklandıktan Sonra Yazıyı Güncelleme ve Pasifleştirme
Merhabalar,
Bu yazımda form gönder butonuna tıklandıktan sonra, butonun yazısını değiştirip tekrar tıklanmasını engelleme örneğinden bahsedeceğim. Bu sayede hem formun gönderildiğine dair kullanıcıya görsel bir geri bildirim verebilir hem de üst üste gönderimi önleyebilirsiniz.
Bu işlemi birçok yöntemle yapabilirsiniz ancak burada HTML üzerinde onclick niteliği ile çözüm sunacağım. Hemen örneğe geçelim.
Gönder Butonu (Temel):
<input type="submit">
onclick ile Güncellenmiş Hali:
<input type="submit" onclick="this.disabled=true; this.value='Gönderiliyor...'; this.form.submit();">
Bu kodla birlikte:
this.disabled = true
→ Buton pasif hale gelir.this.value = 'Gönderiliyor...'
→ Butonun üzerinde yazan metin değişir.this.form.submit()
→ Form gönderilir.
Bu küçük ama etkili işlem sayesinde kullanıcı deneyimini geliştirebilirsiniz.
Canlı örnek için: CodePen'de Görüntüle
Mutlu Kodlamalar! :)