Изменить кнопку отправки на загрузку изображения с помощью jquery

Question

В последнее время на многих сайтах я видел, как кнопки нажимались на загружаемые / думающие изображения после их нажатия, чтобы предотвратить двойной щелчок и убедиться, что пользователь знает, что происходит, прежде чем страница мигнет.В этом случае на самом деле ничего асинхронного не происходит - просто отправка регулярной формы.

Знаете ли вы какие-нибудь хорошие учебники, как это сделать?

Answer 1

Иди самым простым путем. Скажите, что ваша кнопка btnSubmit.

<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit" />
<div id="divMsg" style="display:none;">
    <img src="../images/loading.gif" alt="Please wait.." />
</div>

Теперь используя jquery, по нажатию кнопки:

<script type="text/javascript">
     $('#btnSubmit').click(function(){
         $(this).attr('disabled','disabled');
         $('#divMsg').show();
         //your client side validation here
         if(valid)
            return true;
         else
            {
              $(this).removeAttr('disabled');
              $('#divMsg').hide();     
              return false;
            }
     });
</script>

Кнопка отправки будет отключена, появится анимированное изображение loading.gif. И страница будет опубликована. Преимущество заключается в том, что в случае неудачной проверки вы можете снова включить кнопку отправки и скрыть загрузочное изображение. В таком случае, очевидно, вы увидите сообщение об ошибке.

Answer 2

Хотя простая замена отправки на изображение может работать, удаление кнопки может помешать отправке значения отправки (например, если оно отключено). Это может вызвать проблемы для некоторых приложений, которые зависят от значения отправки, отправляемого на сервер, например, для проверки нажатия кнопки отправки, которую пользователь нажал, или использования одного и того же контроллера для многих действий.

В этих случаях вы можете использовать другой метод, который работает так же хорошо - скрыть отправку и добавить изображение:

$(document).ready(function() {
    $('input[type="submit"]').click(function() {
        $(this).css('display', 'none');
        $('<img>').attr('src', 'http://www.mayla.ro/App_Themes/Glass/Editors/Loading.gif').insertAfter($(this));
    });
});

Answer 3

Использование .replaceWith():

$(".submitButton").click(function () {
    $(this).replaceWith("<img src='loading.gif'>");
});

Answer 4

мой способ сделать это:

$(document).ready(function () {
    $('.class_name').click(function () {
        $(this).parent().append('<img src="data:image/gif;base64,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" />');
        $(this).hide();
    });
});

кредитов: https://github.com/phpawy/jquery-submit-once

Answer 5

Любая из вышеперечисленных стратегий «замены» будет работать, но имейте в виду одну вещь: если вы не отправляете назад (например, веб-формы), но публикуете на другой странице (например, MVC), пользователь сможетнажмите назад.На этом этапе кнопка будет скрыта, и все, что вы увидите, это вертушка.

Я продолжал сталкиваться с этой проблемой и обнаружил, что если вы установите для атрибута unload тега BODY пустое значение "", то эта страница будет по умолчанию «возвращена» к исходному состоянию,Я предполагаю, что это очищает кэшированную версию страницы вашего браузера, поэтому он будет знать, что нужно вернуться к исходной версии, где был прятан спиннер.После того, как я добавил эту пустую выгрузку, проблема была исправлена.Я пробовал это на FF и Chrome

Answer 6

Событие может быть привязано к форме как стандартная практика

<script type="text/javascript">
     $('form').submit(function(){
         $('#btnSubmit').attr('disabled','disabled');
         $('#divMsg').show();
         //your client side validation here
         if(valid)
            return true;
         else
            {
              $(this).removeAttr('disabled');
              $('#divMsg').hide();     
              return false;
            }
     });
</script>

Answer 7

Это заменяет все отправленные входные данные изображением в форме

$(function() {
    $("form").submit(function() {
        $(":submit").replaceWith('<img src="/loading.gif" />');
    });
});

Вы также можете отключить отправку формы снова, если пользователь нажимает кнопку ввода в поле формы ...

$(function() {
    // only run this handler on the first submit of the form 
    $("form").one("submit", function() {
        // replace all submit inputs with an image
        $(":submit").replaceWith('<img src="/loading.gif" />');  
        // don't let this form be submitted again
        $(this).submit(function() { return false; });
    });
});

Answer 8

Я думаю, что вы ищете это, кнопка имеет эту функцию updatemycartpage() в событии onclick

<script language="JavaScript">
     function updatemycartpage(index,itemId,itemnumber){

   jQuery('#Page').html('<p><center><img src="/images/ajax-loader.gif"/></center></p>');
    $.post("/cart.php", {
        'hidItemId[]' : itemId,
        'hidLineId[]' : itemnumber

    },function(data){
        document.location.href ="/cart.php";
    });
}
</script>

Answer 9

Просто удалите кнопку отправки и замените ее своим изображением (сделайте это из события onclick).