画像ボタン送信とフォーム繰り返し送信の問題に関する議論

多くの場合、フォームを美しくするために、送信ボタンが画像に置き換えられます。ただし、細部に注意を払わないと、フォームが繰り返し送信され、データベースレコードが繰り返し挿入されるなど、説明のつかないエラーが発生します。
次の簡単なフォームコードを見てみましょう。

コードをコピー

コードは次のとおりです。

このコードは正しいので、重複送信の問題は発生しません。「<input type="image">」は実際には「<input type="SUBMIT">」と同じ機能を持ちます。画像をクリックすると、submit() 操作が実行されます。
しかし、確信が持てない人もいるため、次のようなコードで画像に onclick アクションを追加します。

コードをコピー

コードは次のとおりです。

画像ボタンを 1 回クリックすると、画像が 2 回送信され、重複して送信されることになります。その機能は次のものと同等です:

コードをコピー

コードは次のとおりです。

もちろんそれは正しくありません。
onclick イベントを使用する必要がある場合は、<input type="image"> の代わりに <img> を使用できます。次のコードも正常に動作します。

コードをコピー

コードは次のとおりです。

私自身もこの問題に遭遇しましたが、ログイン時にユーザーが送信したグラフィック検証コードが間違っていました。考えてみてください。ユーザーが 2 回送信した場合、2 回目に送信するときに確認コードは正しいでしょうか?
2. 画像ボタンの重複送信を防ぐにはどうすればいいですか?

コードをコピー

コードは次のとおりです。

このようなボタンの重複送信を防ぐにはどうすればよいでしょうか?
解決：

コードをコピー

コードは次のとおりです。

この方法では、画像ボタンを使用して重複送信を回避できますが、現在、このようなボタンが 3 つ一緒に存在しています。そのうちの 1 つを押したいのですが、3 つすべて送信できなくなりました。
解決：

コードをコピー

コードは次のとおりです。

<スクリプト言語="JavaScript">
関数テスト(){
i=0;i<document.getElementsByName('t1').length;i++) の場合
document.getElementsByName('t1')[i].disabled=true;
}
</スクリプト>
<フォーム名="f1" メソッド="post" アクション="1.htm" ターゲット="_blank" onsubmit="test()">
<input type="image" name="t1" src="upload/2022/web/newtopic.gif">
<input type="image" name="t1" src="upload/2022/web/newtopic.gif">
<input type="image" name="t1" src="upload/2022/web/newtopic.gif">
</フォーム>

画像を使用してフォームを送信するには、次の 2 つの方法があります。
1.<input type="image" src="xxx.gif">
この画像は自動的にフォームを送信します。つまり、type="submit"です。送信前に判断やテストが必要な場合は、

コードをコピー

コードは次のとおりです。

ただし、この方法でフォームを送信すると、フォームが 2 回送信され、フォーム要素が繰り返し送信され、データベースに異常な書き込みが行われることがよくあります。！
IE 使用時に特に問題が深刻になりますが、Firefox 使用時にはエラーは発生しません。このとき、同じ情報に対してデータベースが一意になるように設定する必要があることに注意してください。
理由: HTML での画像の説明は、「クリックするとすぐにフォームが送信される画像コントロールを作成します。」です。
2.<img alt="送信" src="xxx.gif" onclick="return dosubmit();" style="cursor:pointer;">
この提出方法は正常であり、問題はなく、効果は上記と同じです。したがって、特に Struts アプリケーションでは、最初の方法を使用してデータを送信する頻度を少なくしてください。注: css: cursor: hand は IE でのみ認識され、Firefox では認識されません。しかし、ポインタは互換性があります!
注記！どの方法で送信する場合でも、<form></form> の間に含まれている必要があります。そうでない場合、送信は無効になります。

<<: MySQL学習データベース操作DML初心者向け詳細解説

>>: Tinymce リッチテキストを使用して Vue のツールバーボタンをカスタマイズする実践