javascript submitを無効にする

作成日 2022.03.19
更新日 2022.10.22
javascript
javascript

javascriptで、submitを無効にするサンプルコードを記述してます。「onsubmit」と「addEventListener」では無効化する方法が異なります。

1. 環境
2. submitを無効
3. addEventListener
4. サンプルコード

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 106.0.5249.103

Javascript サンプル集はこちら

submitを無効

「submit」を無効にするには、「onsubmit」の戻り値を「false」にします。

要素.onsubmit = function(){ return false }

実際に、無効にしてみます。

<form action="index.php" id="frm" method="post">
  <input type="text" placeholder="name" name="name" />
  <input type="submit" value="送信" />
</form>

<script>

document.getElementById("frm").onsubmit = function(){ return false }

</script>

実行結果を見ると、「submit」ボタンをクリックしても、ENTERキーを押しても「submit」されないことが確認できます。

解除する場合は「true」を返してあげます。

document.getElementById("frm").onsubmit = function(){ return true }

「html」の「onsubmit」属性に、直接「return false」を記述しても「無効化」は可能です。

<form onsubmit="return false;" action="index.php" id="frm" method="post">

addEventListener

「addEventListener」の場合は「return false」しても無効にはできないので「event.stopPropagation()」と「event.preventDefault()」を使用します。

document.getElementById("frm").addEventListener('submit',
  function (event) {
    event.stopPropagation();
    event.preventDefault();
  }
);

addEventListenerとonの違い

サンプルコード

以下は、
「submit」を無効化して、「解除」ボタンをクリックした際に、解除するだけのサンプルコードとなります。

※cssには「tailwind」を使用して、アロー関数で関数は定義してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<script>

  window.onload = () => {

    frm.onsubmit = () => false

    btn.onclick = () => {
      frm.onsubmit = () => true
    }

  }

</script>

<body>
  <div class="container mx-auto my-56 w-64 px-4">

    <div id="sample" class="flex flex-col justify-center">
      <form id="frm" action="index.php" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
        <div class="mb-4">
          <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
            Username
          </label>
          <input
            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
            id="username" type="text" placeholder="Username">
        </div>
        <div class="flex items-center justify-between">
          <input type="submit"
            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
            value="Sign In"> 
            <button id="btn" type="button"
            class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
            解除
          </button>           
        </div>
      </form>

    </div>

  </div>
</body>

</html>

実行結果を確認すると、無効化されて解除ボタンで解除されていることが確認できます。