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:

1. this.disabled = true → Buton pasif hale gelir.
2. this.value = 'Gönderiliyor...' → Butonun üzerinde yazan metin değişir.
3. 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! :)