送信ボタン/登録ボタンを押した後、ローディングアイコンを表示させる(二重送信防止) - Qiita

シンプルな方法 (2022/5/11追記しました) Railsアプリでデフォルトで活用されているrails-ujsの機能を使えば、より簡単に二重送信防止が実現できたので、追記します。 ただし、くるくる回るアイコンや、オリジナルのアイコンを表示させたい場合は、この方法では実現できません。 送信をクリックすると、表示がこのように変わり押せなくなる↓ (追記終わり) 概要 Railsアプリを例として、ローディングアイコンのgifファイルとJSを使って実装します。 実装するのは、「送信ボタンをクリック後、送信ボタンを非表示にし、代わりにローディングアイコンを表示させる」というシンプルなものです。 事前準備 事前準備として、ローディングアイコンのgifファイルを用意し、loading.gifという名前でアプリ内に保存し使えるようにしておきます。 「ローディングアイコン ダウンロード」等でググればフリ