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 🙂 

0 Shares:

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
Javascript Metni Kopyala Butonu
Devamını Oku

Input Metni Kopyala Butonu

Bu yazımda Javascript ile input, textarea gibi form elemanları içindeki veriyi kopyalayan bir buton yapımı örneğinden bahsettim. Detaylar için yazımı kontrol edebilirsiniz.

Devamını Oku

Javascript - Kar Yağışı
Devamını Oku

Kar Yağışı Efekti

Web sayfanıza ekleyebileceğiniz Javascript ve Css animasyonları ile kar yağışı efekti uygulanmıştır. Nasıl yapıldığını merak ediyorsanız yazımı detaylı inceleyebilirsiniz..

Devamını Oku

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