Form submit olurken yükleniyor resmi göstermek

Css Html Javascript / Jquery Yazılım

Form submit olurken yükleniyor resmi göstermek

Form submit olurken yükleniyor resmi göstermek , form sayfasında birkaç defa submite basılmasının önüne geçilmesinin yöntemlerinden birisi de yükleniyor ibaresi atmaktır. Standart loading giflerinden birini bu amaçla kullanmak akıllıca olacaktır. Gönder veya kaydet tuşuna basınca form submit olana kadar bu resim nasıl ekranda kalacak hep beraber görelim.

loading image form submit sorblog.com

Birtane javascript kodu oluşturarak veya varolan javascript dosyanıza ekleyerek bunu html sayfamıza gömelim.

Kodlama

<script type="text/javascript">
function yukleniyor(e) {
var div = document.createElement('div');
var img = document.createElement('img');
img.src = 'loading.gif';
div.innerHTML = "Yükleniyor...<br />";
div.style.cssText = 'position: absolute; top:30%;left: 22%;width: 250px;height: 250px;'; //Sayfanızı ortalayacak şekilde style girişlerinizi uygun şekilde
div.appendChild(img);
document.body.appendChild(div);
return true;
//Eğer formu submiti iptal etmek gibi bir girişiminiz olacaksa aşağıdaki ibareleri de ekleyebilirsiniz. Normal bir form ekranında gereği yok.
//window.event.cancelBubble = true;
//e.stopPropagation();
}
</script>

Bu yazdığımız javascriptin etkin olabilmesi için fonsiyon çağrımını form alanına aşağıdaki gibi yazıyoruz.

<form id="formid" onsubmit="yukleniyor()" > 
// Buraya ihtiyacımız olan form alanlarını ve submiti ekliyoruz
</form>

Sonuç

Artık form işlemi bitene kadar belirlediğiniz resim ekranda kalacaktır. Bu sayede özellikle büyük ebatlarda dosya veya resim aktarımı yapan formlarda kullanıcı mevzunun bitmediğini devam ettiğini görsel olarak anlayabilecektir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir