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] 2進数、8進数、16進数の数値リテラル

数値リテラルで2進数、8進数、16進数を表す方法です。 2進数の数値リテラル 2進数を数値リテラルで表す場合は、2進数表 ...

[JavaScript] id名からオブジェクトを取得する

タグに付けられたid名からオブジェクトを取得するには、 document.getElementByIdを使用します。 サ ...

[JavaScript] HTMLのDOCTYPEを取得する

HTMLのDOCTYPEを取得するには、document.doctypeを使用します。 サンプルソース 例)DOCTYP ...

[JavaScript] 自然対数を求める(Math.log)

自然対数を求めるには、Math.log()を使用します。 構文 (a自然対数を求める) var x = Math.log ...

[JavaScript] 一定時間後に処理を実行する

一定時間後に処理を実行するには、setTimeoutを使用します。 サンプル 例)5秒後に処理を実行する [crayon ...

スポンサーリンク