javascript hiddenの値を取得する

作成日 2022.06.21
更新日 2023.01.02
javascript
javascript

javascriptで、typeがhiddenに指定されているフォームの値を取得するサンプルコードを記述してます。「value」で取得することができます。

1. 環境
2. hiddenの値を取得
3. サンプルコード

環境

OS windows11 home
ブラウザ chrome 108.0.5359.125

Javascript サンプル集はこちら

hiddenの値を取得

hiddenの値を取得するには、「document.getElementById」などを使用して「value」を取得します。

<form name="frm">
    <input type="hidden" value="testdata" id="foo" name="bar" class="hoge"/>
</form>

<script>

// id名から取得
console.log( document.getElementById("foo").value ) // testdata

// nameから取得
console.log( document.getElementsByName("bar")[0].value ) // testdata

// class名から取得
console.log( document.getElementsByClassName("hoge")[0].value ) // testdata

// formのidから取得
console.log( document.frm.foo.value ) // testdata

</script>

また、document.getElementByIdを省略して「id名」のみで記述することも可能です。

// id名から取得
console.log( foo.value ) // testdata

サンプルコード

以下は、実行ボタンをクリックすると「type=hidden」の値を取得して表示するだけのサンプルコードとなります。

※cssには「Material Design for Bootstrap」を使用してます。関数はアロー関数を使用してます。

アロー関数の使い方

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

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

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.1.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container text-center w-25" style="margin-top:150px">

    <h2><span id="result" class="badge bg-success">結果</span></h2>

    <form name="frm">
      <input type="hidden" value="testdata" id="foo" />
    </form>

    <button id="btn" class="btn btn-danger btn-rounded ">実行</button>

  </div>

  <script>

    btn.onclick = () => {

      result.innerHTML = foo.value

    }

  </script>
</body>

</html>

取得されていることが確認できます。