Javascriptで二重送信を防止したいが、画像ボタンだとうまくいかない。

質問

Javascriptでフォームの二重送信防止を行いたいのですが、
送信ボタンが画像だとうまく動作しないようです。

下記のサイトを参考に作ってみたのですが、アラートすらもでないようです。
http://www.futomi.com/lecture/javacss/double_block.html

何かよい策がありましたら教えてください。お願いします。

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

～以下省略～

<form method="POST" form name="formname" action="test.cgi">

----送信ボタンのコード-----
<input type="image" src="images/acc_send.gif" name="send" onclick="submitForm()">

</form>

回答No.3

steel_gray · ベストアンサー

参考URLの内容は若干問題ありです。
送信が実行されるのは、送信ボタンのクリックとは限らない(※1)のでformのonsubmitに仕掛けを施した方が万全です。

※1 フォーム内にtype=textのinputがあれば、そこでEnterキーをタイプしただけで送信されるブラウザも多いです。

最初の送信アクションの後に送信ボタンを使用できなくするとか、
二回以上押されたらalertで注意を促すとか（過剰サービス??）の必要がなくてとにかく二重送信さえ防ぐのであれば単純に次のように書けばいいかと思います。
（送信ボタンの種類とかは問いませんし、ボタンのonclickとかも要りません）

<form method="POST" action="test.cgi"
onsubmit="this.onsubmit=function(){return false}">

あと、タグを選ぶのに画像をクリックで送信する必要があるのかどうかも重要です。
<input type="image">はサーバサイトクリッカブルマップの為の要素です。（送信した時にクリックされた位置を一緒に送信します）
これを使うと※1とは逆に画像クリックでなければ送信されないブラウザもあります。画像クリックが必須でないなら、
<button type="submit"><img ～></button>
の方が適しています。
（自動的に画像の周りにボタンっぽい装飾がされますが、これが要らなければスタイルシートでborderやbackgroundを変更する事もできます）

お礼

()だけの問題かなぁと思ったら、確かにＩＥでも動きました。
ありがとうございます。

補足

すみません、下のコメントは別の人のお礼でした。

<form method="POST" action="test.cgi"
onsubmit="this.onsubmit=function(){return false}">
このコードだけでも十分二重送信を防ぐことができました！
ありがとうございます。

確かに、、画像クリックするとは限らないですね。
しかし、色々なブラウザに対応しなければならないので、
画像クリックとEnterの両方に対応しないといけない感じですねぇ。

回答No.2

leap_day

こんにちは

試してみたところアラートが出ないのは
submitForm = disableButton;
で
submitForm = disableButton();
と()が抜けているせいだと思います

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

<form method="POST" form name="formname" action="test.cgi">
<img src="images/acc_send.gif" name="send" onClick="submitForm()" style="cursor:pointer;">
</form>

でできませんか？

お礼

()だけの問題かなぁと思ったら、確かにＩＥでも動きました。
ありがとうございます。

回答No.1

leap_day

こんにちは

<input type="image">自体で<input type="submit">と同じ効果があるためではないでしょうか？

参考サイトの下のほうにあるように
<img src="images/acc_send.gif" name="send" onClick="submitForm()">
としてみては？

お礼

すばやいご回答ありがとうございます。

参考サイトの通りに
<img src="images/acc_send.gif" name="send" onClick="submitForm()">
このように書くと、画像がクリックできなくなるんです。
なので、input typeに書き換えたのですよ。

ちなみに、BODYタグ内にスクリプトを書いたら動きました。
しかし、FireFoxではうまくいくのですがIEだけはNGのようです。
IEに対応するためにはどうしたらよいでしょうか。