フォーム画面に各種情報を入力、サブミットした瞬間に画面を触られたら・・・というよくあるお話。
現にやられてしまい、画面のロックをするようにしました。
画面のロックはjQuery+jQuery BlockUI pluginを使いました。
■画面のロック
・jQueryおよびjQuery BlockUI pluginのJSファイルをインポート
・onclickイベントで実行する関数に$.blockUI()を記述。
その後に、submit()なりをすれば応答が返ってくるまで画面をロック
※画面のロックをしてもブラウザの操作(F5や戻るボタン)は有効なので、
触らないでね!というメッセージは必要ですな。
このやり方はiframe内で行いたかったんですが、うまくいきませんでした・・・ショボン
なので、こんなやり方で対応しました。
■innerHTMLで画像を表示
・onclickイベントで実行する関数にinnerHTMLを使って押したボタンを消し、代わりに「実行中」の画像に差し替える
・差し替えた後に、タイマー関数setTimeout(関数,ミリ秒)でサブミットを実行
※タイマーをかけないと、画像がうまく表示されませんでした。
念のため、画像を先読みしたけど改善されず・・・