Form Butonu Üst Üste Tıklanmayı Kapatma

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 bahsettim. Detaylar için yazımın devamını inceleyebilirsiniz.

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;

  1. this.disabled=true sayesinde buton pasif hale gelecektir.
  2. this.value=’Gönderiliyor…’  sayesinde ise buton içindeki değeri yani butonun yazısını Gönderiliyor… olarak ayarlıyoruz.
  3. 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; 

[codepen_embed height=”282″ theme_id=”dark” slug_hash=”dyvpjwN” default_tab=”html,result” user=”furkangiray_com”]See the Pen <a href=’https://codepen.io/furkangiray_com/pen/dyvpjwN’>Form Butonu Üst Üste Tıklanmayı Kapatma</a> by furkangiray.com (<a href=’https://codepen.io/furkangiray_com’>@furkangiray_com</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Umarım işinize yarar.

Mutlu Kodlamalar 🙂 

5 Shares:

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
Owl Carousel 2 Kullanımı
Devamını Oku

Owl Carousel 2 Kullanımı

Popüler slider kütüphanelerinden birisi olan Owl Carousel 2 kullanımından bahsettim. Kurulumu, kullanımı ve basitçe yapı anlatılmıştır.

Devamını Oku

Ülke Telefon Kodu Listeleme
Devamını Oku

Ülke Telefon Kodu Listeleme

Telefon numarası alanına ülkelerin telefon kodlarını listeleyip seçilen ülkenin telefon kodunu otomatik ekleten bir Javascript eklentisinden bahsettim. Yazımın devamını okuyup detaylı inceleyebilirsiniz.

Devamını Oku