JavaScript

[JavaScript] フォームの二重送信を防止する

投稿日:2016年10月10日 更新日:

フォームの二重送信を防止するサンプルです。

ボタンを2回押したときに警告を表示するパターンと、 送信ボタンを使用不可にするパターンを紹介します。

二重送信を防止する(警告表示パターン)

例)送信ボタンを2回押したら、警告を表示する

解説

  • submitの直前に送信フラグをチェックして、フラグがtrueならばsubmitを中止し、falseならばフラグをtrueにした後にsubmitを実行します。
  • submitの結果が返ってきて画面が再描画されたり、ページ遷移してきた場合にはフラグはリセットされるので、またsubmitできるようになります。

二重送信を防止する(ボタン使用不可パターン)

例)送信ボタンを2回押したら、送信ボタンをDisableにする

解説

  • submitの直前に送信ボタンの使用可否をチェックして、使用不可ならばsubmitを中止し、使用可ならばボタンを使用不可にした後にsubmitを実行します。
  • submitの結果が返ってきて画面が再描画されたり、ページ遷移してきた場合にはボタンは使用可となるので、またsubmitできるようになります。

スポンサーリンク

スポンサーリンク

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[JavaScript] セレクトボックスを未選択状態にする

セレクトボックスを未選択状態にするには、selectedIndexに -1 をセットすればOKです。 サンプルソース 例 ...

[JavaScript] ウィンドウを閉じる

ウィンドウを閉じるには、window.close()を使用します。 サンプルソース 例)自分自身のウィンドウを閉じる [ ...

[JavaScript] サブ画面が開いているか閉じているかチェックする

サブ画面が開いているか閉じているかチェックするサンプルです。 サンプルソース 例)サブ画面が開いているか閉じているかチェ ...

[JavaScript] サイト内の文字を選択できないようにする

サイト上の文字(文章)をドラッグ等で選択できないようにするには、 onselectstartを使用すれば実現できます。 ...

[JavaScript] イベント処理を動的に追加する(addEventListener)

clickイベントなどのイベント処理を、JavaScriptで動的に追加するには addEventListenerを使用 ...

スポンサーリンク