Как отображать загрузчик в текстовом поле при нажатии кнопки?

Как отображать загрузчик в текстовом поле при нажатии кнопки? Скажем, у меня есть текстовое поле с именем пользователя и паролем и кнопка входа в систему. После ввода имени пользователя и пароля и нажатия кнопки "Вход" прядильщики должны отображаться в текстовых окнах. Незлая помощь. Я ищу вариант JQuery или Javascript.

Ответ 1

Скажем, ваш html имеет следующее текстовое поле:

<input id='inputsource' />

Определите новый класс css

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

а затем добавив этот класс к вашему тестовому поле с помощью jquery-кода:

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

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

Ответ 2

Просто добавьте изображение "прядильщика" в качестве фонового изображения на ваши входы при отправке формы:

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 */
});