スポンサーリンク

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

Web系

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

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

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

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

const submit_button = document.getElementById("submit_button");
submit_button.addEventListener("click", function() {
  $('#submit_button').html('&emsp;<i class="fa fa-spinner fa-pulse fa-fw"></i>&thinsp;送信中…&emsp;');
  //$("#submit_button").prop("disabled", true); // Chromeでは送信されない問題あり
  $('#submit_button').css({ 'pointerActions' : 'none' }); // クリックを無効にする
});
Web系
スポンサーリンク
YUKIをフォローする
Wynes : Note