बटन पर क्लिक करने पर टेक्स्टबॉक्स में लोडिंग स्पिनर को कैसे प्रदर्शित किया जाए?

Question

बटन पर क्लिक करने पर टेक्स्टबॉक्स में लोडिंग स्पिनर को कैसे प्रदर्शित किया जाए? कहें कि मेरे पास उपयोगकर्ता नाम और पासवर्ड टेक्स्टबॉक्स है, और एक लॉगिन बटन है। एक बार जब मैं उपयोगकर्ता नाम और पासवर्ड दर्ज करता हूं और लॉगिन बटन पर क्लिक करता हूं, तो स्पिनरों को टेक्स्टबॉक्स में प्रदर्शित किया जाना चाहिए। कृप्या सहायता करे। मैं एक JQuery विकल्प या जावास्क्रिप्ट की तलाश में हूँ।

सीएसएस:

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

जे एस:

$('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

बस "स्पिनर" छवि एक पृष्ठभूमि छवि के रूप में अपने इनपुट के लिए जब पर्चे को जमा करने को जोड़ने निम्नलिखित टेक्स्टबॉक्स:

<input id='inputsource' /> 

एक नया सीएसएस वर्ग को परिभाषित करें

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

और फिर jQuery कोड के आधार पर आपके testbox को इस वर्ग को जोड़ने:

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

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

Answer 2

मान लें कि आपका एचटीएमएल है चलो