JavaScript / CSS 編 - 二重送信を防止する

　サーバが高負荷の場合や、処理が複雑で時間がかかる場合、利用者は何度も送信ボタンを押してしまう可能性があります。また、パソコン初心者にありがちですが、何でもかんでもダブルクリックしてしまう人もいます。このうように送信ボタンを 2 回以上押されてしまうと問題が起こるでしょう。ここでは、この二重送信を防止するテクニックをご紹介します。

　form タグの submit 型のボタンでは、二重送信の防止はできませんので、JavaScript の力を借ります。従って送信ボタンは次のようなタグにします。

<input type="button" name="button" value="送信" onClick="submitForm()">

　送信ボタンを押すと、onClick イベントハンドラで submitForm() 関数を呼び出すようにします。そして HTML の head タグ内に次の JavaScript を定義します。

<script language="javascript">
<!-- //
function submitForm() {
submitForm = disableButton;
document.formname.submit();
return false;
}
function disableButton() {
alert('処理中です。しばらくお待ち下さい。');
return false;
}
// -->
</script>

　このスクリプトのポイントは、"submitForm = disableButton;" です。これは、submitForm() 関数を disableButton() 関数に置き換えています。その後、"document.formname.submit();" によってサーバにフォームデータが送信されます。一度送信ボタンが押され、submitForm() 関数が呼び出されると、最初にこの関数自体を別物に置き換えることによって、次回以降の送信を防止しているのです。つまり、2 度目に送信ボタンを押すと、置き換えられた disableButton() 関数が呼び出されることになるのですが、この関数は alert 関数によって警告ダイアログボックスを表示するのです。

　この方法で目的は達成できるのですが、利用者から見れば、そもそも送信ボタンが押せなくなったほうが良いでしょう。前述の JavaScript を改良しましょう。

<script language="javascript">
<!-- //
function submitForm() {
document.formname.button.disabled = true;
submitForm = disableButton;
document.formname.submit();
return false;
}
function disableButton() {
alert('処理中です。しばらくお待ち下さい。');
return false;
}
// -->
</script>

　このスクリプトは前述のスクリプトに赤字の 1 行を加えただけです。これは、送信ボタンを無効にします。送信ボタンを押すと、submitForm() 関数が呼び出されますが、この関数は実行されると最初に送信ボタンを無効にして、押せなくするのです。下のボタンで現象を確認してみて下さい。

　送信ボタンを disabled メソッドで無効にするだけで、目的は達成できるのです。しかし、あえて "submitForm = disableButton;" の行は残したままにしてあります。これは、disabled メソッドが動作しないブラウザーが存在した場合の対処です。近年のブラウザーは、disabled メソッドが使えないということはありませんが、実際の利用者はどんなブラウザーを使うか分かりません。念には念を入れて、次善の策を講じたほうが良いでしょう。事実、Mac OS X の Safari ブラウザー（1.0.3 (v85.8) ）では、disabled メソッドでボタンを無効にすると、ボタンの見た目は無効になったかのように見えます。しかし、実際には 2 回目以降のクリックが有効になっており、エラーダイアログが表示されてしまいます。

　関数 submitForm() ですが、"document.formname.submit();" により、input タグの submit ボタンと同等の処理が実行され、正しくサーバに入力値が送信されるのです。"formname"は、form タグに指定された name 属性値です。従って、form タグは、次の様に name 属性値を指定して下さい。

<form name="formname" action="http://xxxxx/cgi-bin/xxx.cgi" method="post">

　最後に、以上のサンプルでは input タグの button 型を使いましたが、イメージボタンでもbutton タグでも問題なく動作します。ようは、ボタンが押されたときに onClick メソッドを使って submitForm() 関数が呼び出せればよいのです。

送信	<button name="button" onClick="submitForm()">送信</button>
	<img src="images/normal.gif" name="button" onclick="submitForm()">