投稿ボタンをjqueryのローディング画像に変更

Question

最近、多くのサイトでは、ボタンを押した後にボタンをクリックすると、ボタンがダブルクリックを防止し、何かが起こっていることを知っていることを確認していますページがちらつく前に。この場合、実際には非同期は起こりません。通常のフォーム送信のみです。

どのようにこれを行うには良いチュートリアルを知っていますか？

Answer 1

が最も簡単な方法を行く：提出隠し、画像を追加する -

ような場合のために、あなたは同じように良い作品別の方法を使用することができます。あなたのボタンがbtnSubmitであると言う。

Now]ボタンをクリックするだけで、jqueryのを使用して

<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> 

：

<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

送信ボタンを削除してイメージと置き換えるだけです（これはonclickイベントから行う）。

Answer 3

私はあなたがこのいずれかを探している、ボタンが

<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 4

のonclickイベントでこの機能updatemycartpage()を持っている。これは、すべてはあなたがまた

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

フォームのONSUBMIT画像と入力を可能提出代わると思いますユーザーがフォームフィールドに入力した場合にフォームを再送信することを無効にする...

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

使用.replaceWith()：

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

Answer 6

は、単に画像を提出置き換えますが（これは無効だときのように）送信されてからの入力の値を提出できない場合がありますボタンを削除し、動作する可能性があります。これは、サブミット値がサーバーに送信されることに依存するアプリケーションでは、ユーザーが押したサブミット・ボタンのテストや、多数のアクションのための同じコントローラーの使用などの問題を引き起こす可能性があります。

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

イベントは、標準的な慣行としてフォームにバインドされる可能

<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 8

これを行うための私の方法：

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

上記 "交換" 戦略のどれでしょう一つのことを念頭に置いてください：あなたがポストバックしていない場合（例えばwebforms）、別のページ（例えばMVC）にポストしている場合、ユーザーは戻ることができます。この時点でボタンは非表示になり、表示されるのはスピナーだけです。

BODYタグのunload属性をブランク""に設定すると、ページが元の状態に戻って並べ替えられることがわかりました。私は、ブラウザのキャッシュされたバージョンのページをクリアして、スピナーが隠されていた元のバージョンに戻ることを知っていると思います。私はこの空白のアンロードを追加した後、問題を修正しました。私はこれまでにFFやChromeで試してみた