【保存版】JavaScriptでフォーム二重送信を防ぐ全7つの方法とサンプルコード

2024-05-20

JavaScript を使ってフォーム送信を防止する方法

onsubmit 属性と return false を使用する

これは最も簡単な方法の一つです。フォーム要素に onsubmit 属性を設定し、その値を return false にすることで、送信イベントをキャンセルします。

<form onsubmit="return false;">
  <input type="submit" value="送信">
</form>

利点:

記述が簡単で分かりやすい

JavaScriptが無効な環境では動作しない
ユーザーがフォームの内容を確認できない可能性がある

送信ボタンを無効化する

送信ボタンがクリックされたら、JavaScript でそのボタンを無効化することで、二重送信を防止することができます。

<form>
  <input type="submit" value="送信" id="submitButton">
</form>

<script>
  document.getElementById('submitButton').addEventListener('click', function() {
    this.disabled = true;
    // 送信処理を実行
  });
</script>

ユーザーが二重送信を試しても、ボタンが反応しないため分かりやすい

ボタンのスタイルが変化する可能性がある

非同期処理を使用する

フォーム送信後、非同期処理で必要な処理を実行することで、二重送信を防ぐことができます。

<form>
  <input type="submit" value="送信">
</form>

<script>
  document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault(); // 送信イベントをキャンセル

    // 送信処理を非同期で実行
    fetch('/submit', {
      method: 'POST',
      body: new FormData(this)
    })
    .then(response => response.json())
    .then(data => {
      // 送信処理完了後の処理
      console.log(data);
    })
    .catch(error => {
      console.error(error);
    });
  });
</script>

ユーザーインターフェースを妨害せずに二重送信を防止できる
送信処理の進捗状況をユーザーに示せる

コードが複雑になる
非同期処理の知識が必要

トークンを使用する

サーバーから発行されたトークンをフォームに埋め込み、送信時に検証することで、不正な送信を防ぐことができます。

<form>
  <input type="hidden" name="token" value="<?php echo $token ?>">
  <input type="submit" value="送信">
</form>

<?php
$token = bin2hex(random_bytes(32));
echo "<input type='hidden' name='token' value='$token'>";

document.querySelector('form').addEventListener('submit', function(event) {
  // トークンの検証処理
  if (this.elements['token'].value !== '<?php echo $token ?>') {
    event.preventDefault();
    alert('不正な送信です。');
    return;
  }

  // 送信処理を実行
  // ...
});

高いセキュリティを実現できる

サーバー側の処理が必要

上記で紹介した方法はそれぞれ利点と欠点があります。状況に応じて適切な方法を選択することが重要です。

ユーザーに二重送信を明確に示したい場合: 送信ボタンを無効化する
高いセキュリティが必要な場合: トークンを使用する

上記以外にも、様々な方法があります。
それぞれの方法の詳細は、参考資料などを参照してください。
セキュリティ対策を怠ると、思わぬ被害を受ける可能性があります。十分注意してください。

[JavaScriptのsubmitイベントで、フォーム送信をコントロールしよう | 侍エンジニアブログ](https

JavaScript でフォーム送信を防止するサンプルコード

onsubmit 属性と return false を使用する

<!DOCTYPE html>
<html>
<head>
  <title>フォーム送信防止</title>
</head>
<body>
  <form onsubmit="return false;">
    <input type="text" name="name" placeholder="名前">
    <input type="email" name="email" placeholder="メールアドレス">
    <input type="submit" value="送信">
  </form>

  <script>
    function preventSubmit() {
      alert('フォームを送信しますか？');
      return false; // 送信をキャンセル
    }
  </script>
</body>
</html>

説明:

フォーム要素に onsubmit 属性を設定し、その値を preventSubmit 関数に設定します。
preventSubmit 関数では、alert で確認メッセージを表示し、return false を返すことで送信をキャンセルします。

送信ボタンを無効化する

<!DOCTYPE html>
<html>
<head>
  <title>フォーム送信防止</title>
</head>
<body>
  <form>
    <input type="text" name="name" placeholder="名前">
    <input type="email" name="email" placeholder="メールアドレス">
    <input type="submit" value="送信" id="submitButton">
  </form>

  <script>
    document.getElementById('submitButton').addEventListener('click', function() {
      this.disabled = true; // ボタンを無効化
      // 送信処理を実行
      alert('送信しました！');
    });
  </script>
</body>
</html>

送信ボタンに id="submitButton" を設定します。
その後、送信処理を実行します。

非同期処理を使用する

<!DOCTYPE html>
<html>
<head>
  <title>フォーム送信防止</title>
</head>
<body>
  <form>
    <input type="text" name="name" placeholder="名前">
    <input type="email" name="email" placeholder="メールアドレス">
    <input type="submit" value="送信">
  </form>

  <script>
    document.querySelector('form').addEventListener('submit', function(event) {
      event.preventDefault(); // 送信イベントをキャンセル

      // 送信処理を非同期で実行
      fetch('/submit', {
        method: 'POST',
        body: new FormData(this)
      })
      .then(response => response.json())
      .then(data => {
        // 送信処理完了後の処理
        console.log(data);
        alert('送信しました！');
      })
      .catch(error => {
        console.error(error);
        alert('送信に失敗しました。');
      });
    });
  </script>
</body>
</html>

フォーム送信イベントで event.preventDefault() を呼び出し、送信をキャンセルします。
fetch API を使用して、非同期で送信処理を実行します。
送信処理が成功したら、alert で送信完了を通知します。

これらのサンプルコードを参考に、状況に応じて適切な方法を選択して、フォーム送信を防止してください。

JavaScript でフォーム送信を防止するその他方法

ページ遷移を使用する

<form>
  <input type="text" name="name" placeholder="名前">
  <input type="email" name="email" placeholder="メールアドレス">
  <button type="button" onclick="submitForm()">送信</button>
</form>

<script>
  function submitForm() {
    // フォームのデータを JavaScript で取得
    const data = {
      name: document.querySelector('input[name="name"]').value,
      email: document.querySelector('input[name="email"]').value
    };

    // 送信処理を実行
    // ...

    // 別のページに遷移
    window.location.href = '/success';
  }
</script>

ユーザーインターフェースが自然になる
サーバー側で二重送信チェックを行う必要がない

ブラウザの戻るボタンを使用すると、前のページに戻ってしまう可能性がある

入力値を変更検知する

フォームの入力値が変更されたら、JavaScript でフラグを立て、送信時にそのフラグを確認することで、二重送信を防止することができます。

<form>
  <input type="text" name="name" placeholder="名前" onchange="setSubmitFlag()">
  <input type="email" name="email" placeholder="メールアドレス" onchange="setSubmitFlag()">
  <input type="submit" value="送信">
</form>

<script>
  let submitFlag = false;

  function setSubmitFlag() {
    submitFlag = true;
  }

  document.querySelector('form').addEventListener('submit', function(event) {
    if (!submitFlag) {
      event.preventDefault();
      alert('送信しますか？');
      return false;
    }

    submitFlag = false; // 送信後フラグをリセット
  });
</script>

入力値が変更されるたびにフラグを立てる必要がある

キーボードイベントを使用する

<form>
  <input type="text" name="name" placeholder="名前">
  <input type="email" name="email" placeholder="メールアドレス">
  <input type="submit" value="送信">
</form>

<script>
  document.querySelector('form').addEventListener('keydown', function(event) {
    if (event.keyCode === 13) {
      event.preventDefault();
      alert('送信しますか？');
    }
  });
</script>