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] 文字列のバイト数を取得する

文字列のバイト数を取得するサンプルFunctionです。 サンプル 例)引数に渡された値のバイト数を取得するFuncti ...

[JavaScript] 選択されている文字列を取得する(.getSelection())

選択されている文字列を取得するには、document.getSelection()を使用します。 サンプルソース 例)ボ ...

[JavaScript] テキストの選択範囲のカーソル位置を取得する

JavaScriptでテキストボックスのカーソル位置を取得するには、 selectionStart、selectionE ...

[JavaScript] 文字に下線/上線/取消し線を引く

JavaScriptで文字に下線/上線/取消し線を引くには、style.textDecorationを使用します。 サン ...

[JavaScript] 文字列に指定した文字が含まれるかどうか判定する

文字列に指定した文字が含まれるかどうか判定するサンプルです。 indexOfを使う方法とmatchを使う方法の2種類あり ...

スポンサーリンク