Javascriptでローディング表示を実装する - 佐賀人のIT技術者のブログ

アフィリエイト紹介

優れたUXをデザインするための理論とプロセス、手法に関する知識を学びたい方は、こちら！

フォーム送信時にsubmitボタンを無効化してローディング画面を表示するスクリプトを紹介します。サーバ処理は割愛します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サイトタイトル</title>
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
  </head>
  <body>
    <form method="post">
      <input type="text" name="v1">
      <input type="submit">
    </form>
    <div id="loading">処理中です…そのままお待ちください</div>
  </body>
</html>

style.css

#loading {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 24px;
  text-align: center;
  line-height: 100vh;
  z-index: 9999;
}

main.js

function display_loading(form, submit_btn=null) {
  let form_id = $(form).attr('id')
  // 送信ボタンが指定されているならそれを無効化
  if (submit_btn) {
    $(submit_btn).prop('disabled', true);
  }
  // 送信ボタンが指定されていないならフォーム内からsubmitボタンを探す
  else {
    let submit_btn = '*[type="submit"],*[onclick*="requestSubmit"]'
    submit_btn = $(form).find(submit_btn);
    // submitボタンがフォーム外にある場合もあるので検索する
    if (submit_btn.length == 0) {
      submit_btn = $(`input[form="${form_id}"]`);
    }
    $(submit_btn).prop('disabled', true);
  }
  // フォーム送信の1秒後にローディング画面を表示
  setTimeout(() => {
    $('#loading').css('display', 'block');
  }, 1000);
}

$("form").on("submit", function(e) {
  let form_id = $(this).attr('id');
  // バリデーションが有効ならローディング画面を表示する。.valid()はjquery-validationのメソッドなので、必要であれば置き換えてください
  if ($(this).valid()) {  
    display_loading($(this));
  }
});

ちなみにajax送信の時も表示したい場合は、そのボタンのクリックイベント受信時にdisplay_loadingを呼び出す。

$('#ajax_button').on('click', function() {
  display_loading(null, $(this));
})

jQueryではajaxSend()を利用するとajax送信前に処理を追加できるが、どのボタンがクリックされたかわからないので、ボタン無効化をするならクリックイベントをキャッチした方がやりやすいかもしれません。