HTTPサーバーとWeb開発

84. HTML画面でSubmitボタンの二重起動防止するには？

Web開発する上で、HTMLやJavaScriptを使用しWeb画面(GUI)を作成するのだが、
Webで使用されるHTML画面では、5250エミュレーターで使用していたDSPFの画面
と異なり自由に操作できる反面、ボタン等の制御が必要になります。
特にWebアプリケーションで、HTML画面上のSubmitボタンを連続打鍵することにより
CGIのサーバーエラーやデータ登録の不整合を引き起こすことが多々あるのも事実です。

ここで簡単に、HTML画面上のSubmitボタン二重起動を防ぐテクニックを紹介します。
簡単に言えばHTML画面よりサーバーへリクエスト(Submitボタンで)したのち、
自分自身(Submitボタン)を使用不可状態にするだけです。

それではSubmitボタン二重起動防止のJavaScriptコーディング例を挙げます。

まず JavaScriptの グローバル変数に 二重起動防止フラグ変数(false)用意し、
submit関数内で 実際にフォームSubmit実行後にフラグを true する。
二度目以降、ボタンを押した場合 次の条件文で 

     if(flg == true) return;

処理が戻されることとなり、以降は処理されません。

【 二重起動防止 JavaScriptコーディング 】
-------------------------------------------------------------------
<html>
  <head>
     :
     :
  <script language="JavaScript">
    var flg = false;//2重起動防止ﾌﾗｸﾞ
    function submit(self){
       :
       if(flg == true) return;//ここで二重起動を防ぐ
       :
       document.frmSam.submit();//Submit実行
       flg = true;
    }
  </script>
  </head>
  <body>
    <form name="frmSam">
       :
       :
    <input type="button" name="btn" value="送信" onclick="submit()">
       :
    </form>
  </body>
</html>
-------------------------------------------------------------------