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

投稿日：2016年10月10日更新日：2018年5月2日

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

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

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
//判定用フラグ
var isSubmit = false;

function checkNijyuSubmit(){
  if(isSubmit){
    //フラグがtrueならアラートを表示してsubmitしない
    alert("処理中です。");
    return false;
  }else{
    //フラグがtrueでなければ、フラグをtrueにした上でsubmitする
    isSubmit = true;
    return true;
  }
}
</script>
</head>
<body>
  <form action="xxx" onsubmit="return checkNijyuSubmit();">
    <input type="submit" value=" 送信 " />
  </form>
</body>
</html>

<!DOCTYPE html>

<head>

//判定用フラグ

var isSubmit = false;

function checkNijyuSubmit(){

if(isSubmit){

//フラグがtrueならアラートを表示してsubmitしない

alert("処理中です。");

return false;

}else{

//フラグがtrueでなければ、フラグをtrueにした上でsubmitする

isSubmit = true;

return true;

}

</script>

</head>

<body>

</form>

</body>

</html>

解説

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

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
function checkNijyuSubmit(){
  var obj = document.getElementById("btnSubmit");
  if(obj.disabled){
    //ボタンがdisabledならsubmitしない
    return false;
  }else{
    //ボタンがdisabledでなければ、ボタンをdisabledにした上でsubmitする
    obj.disabled = true;
    return true;
  }
}
</script>
</head>
<body>
  <form action="xxx" onsubmit="return checkNijyuSubmit();">
    <input type="submit" id="btnSubmit" value=" 送信 " />
  </form>
</body>
</html>

<!DOCTYPE html>

<head>

function checkNijyuSubmit(){

var obj = document.getElementById("btnSubmit");

if(obj.disabled){

//ボタンがdisabledならsubmitしない