Làm cách nào để hiển thị trình tải xuống trong hộp văn bản khi nhấp vào nút?

Question

Làm cách nào để hiển thị trình tải xuống trong hộp văn bản khi nhấp vào nút? Giả sử tôi có hộp văn bản tên người dùng và mật khẩu và nút đăng nhập. Khi tôi nhập tên người dùng và mật khẩu và nhấp vào nút Đăng nhập, các trình quay sẽ được hiển thị trong hộp văn bản. Giúp đỡ một cách tử tế. Iam đang tìm kiếm một tùy chọn JQuery hoặc Javascript.

Answer 1

Chỉ cần thêm "spinner" hình ảnh làm hình nền cho đầu vào của bạn khi nộp mẫu đơn:

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 2

Hãy nói rằng html của bạn có hộp văn bản sau:

<input id='inputsource' /> 

Định nghĩa một lớp css mới

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

và sau đó thêm lớp này để testbox của bạn bằng cách mã jquery:

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

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