javascript submitを無効にする

javascript submitを無効にする

javascriptで、submitを無効にするサンプルコードを記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 99.0.4844.51

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>

window.onload = function(){
  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">

サンプルコード

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

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

<!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>

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