送信ボタンの二重クリック防止を目的とするボタン無効化の推奨される対応方法について

サーバーに対して何かデータを送信するフォームがある時、送信ボタンが誤って２回連続で押されてしまったり、リクエスト送信後のサーバー側における処理終了後の画面遷移を待たずに再度送信ボタンを押されたりすること防ぐ為に、「送信ボタンを押されたらボタン自体を無効化する」という処理を行いたい場合があります。

しかし、そのままonClickイベントでdisabledを適用すると、Google Chromeだけはリクエストの送信が実行されない問題が発生します。なので、onClickではなくonSubmitイベント時に処理を行うようにします。

ただ、実際に私が試した環境では、disabled状態になった感もなく画面遷移して微妙な感じだったので、disabledにするのではなくマウスのポインターによるクリックを無効にするようにしました。

さらに、アニメーションアイコンを表示するようにすると、処理中なイメージが出て良い感じです。下記サンプルコードは、前提としてjQueryとfontawesome 5を読み込んでいます。

const submit_button = document.getElementById("submit_button");
submit_button.addEventListener("submit", function() {
  $('#submit_button').html('&emsp;<i class="fa fa-spinner fa-pulse fa-fw"></i>&thinsp;送信中…&emsp;');
  $('#submit_button').css({ 'pointerActions' : 'none' }); // クリックを無効にする
});