Javascriptでフォームの二重送信防止を行いたいのですが、
送信ボタンが画像だとうまく動作しないようです。
下記のサイトを参考に作ってみたのですが、アラートすらもでないようです。
http://www.futomi.com/lecture/javacss/double_blo …
何かよい策がありましたら教えてください。お願いします。
<<ソース>>
<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ベストアンサー
- 回答日時:
参考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
- 回答日時:
こんにちは
試してみたところアラートが出ないのは
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
- 回答日時:
こんにちは
<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に対応するためにはどうしたらよいでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript javascriptで入力フォームが空欄の時にアラートによるエラーを出すコードを書いています。 2 2023/06/13 17:58
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
confirmのOK・キャンセルを押し...
-
<form action="#">の意味とは?
-
フォーム内で記入したクエリ送...
-
confirm()で表示したダイアログ...
-
jQueryで特定のチェックボック...
-
メッセージボックスで「はい」...
-
Javascriptで二重送信を防止し...
-
トグルボタンの文字色
-
HTAで、こんなボタンが作りたい。
-
onClick="this.form.submit
-
onclickイベントでの二重送信防...
-
【掲示板の機能】投稿時にサイ...
-
イントラマート
-
disabled プロパティが表示され...
-
submitするとなぜか2度実行する
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
submitボタン押下時にPOSTされ...
-
onchangeイベントを強制的に発...
-
大文字か小文字かを判断する方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
VBSでブラウザ上のテキストボッ...
-
submitするとなぜか2度実行する
-
onclickで2個指定するには?
-
confirmのOK・キャンセルを押し...
-
ボタン2回押しを無効にしたい
-
フォーム内で記入したクエリ送...
-
onClick="this.form.submit
-
JavaScriptにおいてPOSTで送信...
-
disabled プロパティが表示され...
-
確認ダイアログの出し方(JavaS...
-
onclickをEnterキーでも行いたい
-
jsで質問です。 ボタンが二つ存...
-
ボタン無しでフォーム内容送信
-
confirm()で表示したダイアログ...
-
ボタンを押すとチェックボック...
-
javascriptで二重送信防止
-
VBScript
-
メールフォーム:「必須項目」...
-
Javascriptで二重送信を防止し...
-
ホームページビルダーでメール...
おすすめ情報