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] 文字列に指定した文字が含まれるかどうか判定する

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

[JavaScript] テキストボックスのmaxlength値を取得する

テキストボックスのmaxlength値を取得するには、maxLengthを使用します。 (※HTML5以降であれば、テキ ...

[JavaScript] イベントハンドラを設定する

イベントハンドラはHTMLタグに「onclick="~"」のように記述することが多いですが、 JavaScriptで動的 ...

[JavaScript] 文字を斜体にする

JavaScriptで文字を斜体にするには、style.fontStyleを使用します。 サンプルソース 例)ボタンを押 ...

[JavaScript] 即時関数を使用する

即時関数は、関数の定義と実行を同時に行う関数です。 構文 即時関数の構文です。 即時関数は通常の関数と同様に、引数を受け ...

スポンサーリンク