📅作成日2021/11/16 更新日2021/11/16

タグ:#フォーム送信中の画面 #くるくる

コピペでできる!フォーム送信中の送信中の画面を表示する方法[javascript,HTML]

サムネイル

フォーム送信した時の、送信中の時の画面を出します。フォーム送信中のくるくるも再現します。

フォーム送信中の画面作成(背景を暗くする)

まずは、背景を暗くする方法をやってみましょう!

背景を暗くするためには、divを使います。


  
  <div class="load" >
         </div>

上のこのコードをHTMLに書き込みます。divだけだと何も動かないので、スタイルを設定していきます。


  
  .load{
    position:fixed;
    top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index:20;
  cursor: wait;
   background-color: #333333;
    height: 100%;
    width:100%;
    opacity:0.5;
  }

これを、CSS(スタイルシート)に書き込みます。書き込む時ですが、もし、他の要素が暗くならない時は、z-indexを上げてください。もっと暗くしたい、もっと明るくしたいという方は、opacityを 上げたり下げたりしてみてください。上げたら不透明度が下がって(暗くなる)、下げたら、不透明度が上がります(明るくなる)。この背景は、カーソルを背景に持ってくると、くるくるとカーソルが回転 します。そうしたく無い場合は、(cursor:wait;)を消してください。このように自分でカスタマイズすると、いいでしょう。これで、フォーム送信するときの背景を暗くする方法です。

フォーム送信中の画面作成(くるくる表示とメッセージ)

さっきは背景を暗くしたので、次は、くるくるとメッセージを作成します!。くるくるはjavascriptを使うの?と、思う方もいるかもしれませんが、くるくるは、CSSを使えば簡単に再現できます。


  
  <div class="load1">
    <br>
   <div class="loader"></div>
  <p>フォームを送信中です。少々お待ちください。</p>
  </div>

これをHTMLにコピペします。これだけだと、すごくおかしくなるので、CSSで中央に文字を移動させて、背景の色も変えて、くるくるもCSSでやります。


  
  .loader {
border: 12px solid #fafafa;
border-radius: 50%;
margin-left: 30%;
border-top: 12px solid #3498db;
width: 100px;
height: 100px;
animation: spin 1s linear infinite;
}

@keyframes spin{
0%{
transform: rotate(0deg);
}

100%{
transform: rotate(360deg);
}
}
  .load1{
    nimation: sk-scaleout 1.0s infinite ease-in-out;
    position:fixed;
    top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index:201;
   text-align: center;
   background-color: black;
   color:#ffffff;
    opacity:1;
  }

これを、CSSにコピペしたら、ちゃんとくるくるが出てきて、メッセージもちゃんと表示されると思います。

CSSを自分でカスタマイズして、背景の色などを変えても面白いでしょう。

このままだと、フォームに送信中の時だけ表示するはずが、ページを読み込んだ時から表示されるため、javascriptでフォームが送信されたら、表示されるようにしないといけません。次はそれをやっていきま しょう。

フォームを送信したときに表示する

これは、案外簡単です。まず、このままだと、背景とメッセージとぐるぐるを、一つずつ、非表示にしないといけないので、背景とメッセージとぐるぐるをdivで一つにしてやります。

一つにするとこのようになります。↓


  
  <div style="display:none;" id="form11">
  <div class="load" >
 </div>
 <div class="load1">
   <br>
  <div class="loader"></div>
 <p>フォームを送信中です。少々お待ちください。</p>
</div>
</div>

このように、divで一つにしてから、divにstyle="display:none;"のしておく事で、非表示にしておきます。javascriptで表示させるためにdivにidを付け足します。idはなんでもいいですが ここでは(form11)にしておきます。

javascriptをする前に、formにonsubmit="〇〇()"を追加する必要があります。〇〇()の〇〇は今回では(loading())にします。


  
<form action="〇〇.php" method="post" enctype="multipart/form-data" onSubmit="loading()">

formに(onsuvmit="loading()")を付け足してください。

ここまでできたら、次は、javascriptで、formの送信ボタンが押されたら、フォーム送信中の画面を出すようにします。


  
  <script>
  document.getElementById("form11").style.display ="none"; //一応ここでもdisplay:noneを指定しておく
    function loading(){
      const p1 = document.getElementById("form11");
      p1.style.display ="block"; //display:block;にする
    }
  </script>

これを、コピペしてください。コピペしたら、実際にフォームを送信してみてください。そうすると、フォーム送信中の画面が出てきます!!

そもそも、フォーム送信中の画面なんかいるの?と思うかもしれませんが、PWA(簡単に言うと、webページアプリ化)を実装して、携帯でwebページをアプリかしたやつでフォームを送って見ると、 上の読み込みバーみたいな物が、見えないので、ついつい何回も押してしまい、フォーム送信失敗とかなってしまうので、PWAを実装している人は是非やっておいた方がいいでしょう。あと、フォーム送信中に 他のページを間違えて開くのを防止とかできます。

【PWA】実装方法とインストールボタンの作り方

どのように表示されるかのサンプル

終わり