Merhabalar,
Bu yazımda form gönder butonuna tıklandıktan sonra buton yazısını güncelleyip, art arda tıklanmayı önlemek için butonu pasif yapma örneğinden bahsedeceğim.
Bu sayede bazı üst üste form gönderimini önleyip, tıklandığına dair buton üzerinde bir yazı yazıp kullanıcıyı formun gönderildiğine dair bilgi verebiliriz.
Aslında bu işlemi bir çok yol ile yapabilirsiniz. Fakat ben HTML üzerinde onclick attribute (nitelik) kullanarak yapacağım. Basit bir yol olduğunu sizde birazdan göreceksiniz.
Hemen type niteliği submit olan bir input elemanı oluşturalım;
<input type="submit"> Gönder butonunu ekledik yukarıda bahsettiğim onclick niteliğini ekleyelim.
<input type="submit"
onclick="this.disabled=true;
this.value='Gönderiliyor...';
this.form.submit();"> Tüm güncellemeler ile birlikte submit Gönder butonumuz yukarıdaki gibi olacaktır.
Özetle onclick ile gönder butonuna tıklandığında yapılacak işlemler;
- this.disabled=true sayesinde buton pasif hale gelecektir.
- this.value=’Gönderiliyor…’ sayesinde ise buton içindeki değeri yani butonun yazısını Gönderiliyor… olarak ayarlıyoruz.
- En sonunda ise this.form.submit(); komutu ile onclick niteliğini tamamlıyoruz ve formu gönderiyoruz.
Evet işlemlerimiz bu kadar. Formlarınızda submit elemanlarınıza uyguladığınız zaman hem kullanıcıya formun gönderildiğine dair kısa süreli bilgi vermiş olup, hem de üst üste form gönderimini engelleyebilirsiniz.
Basitçe nasıl bir şey oluştuğuna dair bir göz atıp test etmek isterseniz;
Umarım işinize yarar.
Mutlu Kodlamalar 🙂
