フォームの二重送信を防ぐ

送信ボタンを1回押したら、2回目は押せないようにします。

Program

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
</head>
<body>
  <form onsubmit="this.btn.disabled=true;">
    注文内容:<input type="text" name="x">
    <input type="submit" name="btn" value="送信">
  </form>
</body>
</html>

HTML内にJavaScriptを書きたくない場合や、submitするときにJavaScriptで入力チェックなどの処理をしている場合などでは、以下のようにしてもよいです(jQuery使用)。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(function(){
      $("#form1").on("submit", function(){
        // 何かいろいろ処理をして
        // ...

        // 最終的にsubmitするとき
        if ("何らかの判定") {
          // ボタンを使用不可能にする
          $("#btn1").prop("disabled", true);
          // submitする
          return true;
        } else {
          // submitしない
          return false;
        }
      });
    });
  </script>
</head>
<body>
  <form id="form1" action="order.php">
    注文内容:<input type="text" name="x">
    <input type="submit" id="btn1" value="送信">
  </form>
</body>
</html>

Demo

下はすでに1回クリックした後の状態です。送信ボタンがdisabledにされています。フォームは送信されません。

注文内容:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です