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

シンプルな方法

(2022/5/11追記しました)

Railsアプリでデフォルトで活用されているrails-ujsの機能を使えば、より簡単に二重送信防止が実現できたので、追記します。
ただし、くるくる回るアイコンや、オリジナルのアイコンを表示させたい場合は、この方法では実現できません。

<%= f.submit "送信", data: { disable_with: "送信中..." } %>

送信をクリックすると、表示がこのように変わり押せなくなる↓

(追記終わり)

概要

Railsアプリを例として、ローディングアイコンのgifファイルとJSを使って実装します。
実装するのは、「送信ボタンをクリック後、送信ボタンを非表示にし、代わりにローディングアイコンを表示させる」というシンプルなものです。

事前準備

事前準備として、ローディングアイコンのgifファイルを用意し、loading.gifという名前でアプリ内に保存し使えるようにしておきます。
「ローディングアイコン　ダウンロード」等でググればフリーのものが見つかるでしょう。

実装

このような一般的なフォームがあるとします。

<%= form_with url: "パス" do |form| %>
  <%= f.button '登録', class: 'btn' %>
<% end %>

div要素を以下のように追記します。

<%= form_with url: "パス" do |form| %>
  <%= f.button '登録', class: 'loading_btn' %>
  <div class="loading">
    <%= image_tag 'loading.gif' %>
  </div>
<% end %>

追加したdiv要素はデフォルトでは非表示にしておきます。

.loading {
  display: none;
}

下記のようなJSを適用させます。

$(function() {
  $('form').on('submit', function() {
    $('.loading_btn').hide();
    $('.loading').show();
  });
});

以上で完了です。
必要なら、CSSで適当にレイアウトを整えてください。

おまけ：link_toの場合

フォームの中のsubmitボタンではなく、link_toで作ったボタンにもローディングアイコンを表示させたい場合、
以下のようにすることで可能です。

パターン1

thisを使っているので、繰り返し処理内でも使いやすい

<%= link_to "更新", なんたらupdate_path , method: :post, class: 'btn btn-success　loading_btn' %>
<div class="loading">
  <%= image_tag 'loading.gif' %>
</div>

$(".loading_btn").click(function(){
  $(this).hide()
  $(this).next("div").show();
  });

パターン2

htmlにonclick属性を付与している

<%= link_to "更新", なんたらupdate_path , method: :post, class: 'btn btn-success　loading_btn', onclick: "clickLoadingBtn()" %>
<div class="loading">
  <%= image_tag 'loading.gif' %>
</div>

function clickLoadingBtn() {
  $('.loading_btn').hide();
  $('.loading').show();
}