Bir düğme tıklatıldığında bir metin kutusuna yükleme döndürücüsü nasıl görüntülenir?

Question

Düğme tıklatıldığında bir metin kutusuna yükleme döndürücüsü nasıl görüntülenir? Bir kullanıcı adı ve parola metin kutum ve bir giriş düğmem var. Kullanıcı adı ve şifreyi girip Giriş düğmesine bastığımda, iplikçiler metin kutularında gösterilmelidir. Kibarca yardım. Bir JQuery seçeneği veya Javascript arıyorum.

CSS:

input.spinner { 
    background-image:url('spinner.gif'); 
    background-repeat:no-repeat; 
    background-position:5px 5px /* Change to accommodate to your spinner */ 
} 

JS:

$('form').submit(function(e){ 
    e.preventDefault(); 
    $f = $(this); 
    $f.submit(); /* replace with your ajax call */ 
    $f.find('input[type="text"], input[type="password"]') 
     .val('') /* Remove values or store them if you need them back */ 
     .addClass("spinner") /* Add the spinning image */ 
     .attr("disabled", "disabled"); /* Disable the inputs */ 
}); 

Answer 1

Sadece girişlerine arka plan resmi olarak "spinner" resim eklemek aşağıdaki metin kutusu:

yeni css sınıfını tanımlamak

.loadinggif 
{ 
    background: 
    url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif') 
    no-repeat 
    right center; 
} 

ve sonra jquery kodu ederek testbox bu sınıf ekleyerek:

$('#inputsource').addClass('loadinggif'); 

Jsfiddle: http://jsfiddle.net/msjaiswal/FAVN5/

Answer 2

en html sahip olduğunu varsayalım formu gönderilirken