javascript form内の要素を全て取得する
- 作成日 2022.10.15
- javascript
- javascript
javascriptで、form内の要素を全て取得するサンプルコードを記述してます。
環境
- OS windows11 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 106.0.5249.103
form内の要素を全て取得
form内の要素を全て取得するには、「elements」を使用してform内の要素を全て「HTMLFormControlsCollection」として取得して、「Array.from」してループさせて取得します。
<form id="frm">
<input type="text" id="one" name="hoge" />
<input type="number" id="two" name="foo" />
<input type="radio" id="three" name="bar" />radio
</form>
<script>
const form = document.getElementById('frm');
console.log(form.elements);
Array.from(form.elements).forEach(v => {
console.log(v);
});
</script>
実行結果
スプレッド構文を使用して配列化することもできます。
const form = document.getElementById('frm');
console.log(form.elements);
[...form.elements].forEach(v => {
console.log(v);
});
「for – of」を使用してループさせることも可能です。
const form = document.getElementById('frm')
for (const v of form.elements) {
console.log(v);
};
HTMLFormControlsCollection
また「HTMLFormControlsCollection」として取得できる要素は、以下のものになります。
- button
- fieldset
- input
- object
- output
- select
- textarea
実際に確認してみます。
<form id="frm">
<fieldset>
<input type="text" id="one" name="hoge" />
</fieldset>
<div>
<p><input type="number" id="two" name="foo" /></p>
</div>
<button>送信</button>
</form>
<script>
const form = document.getElementById('frm')
for (const v of form.elements) {
console.log(v);
};
</script>
実行結果をみると対象の要素しか取得されていないことが確認できます。
サンプルコード
以下は、
「取得」ボタンをクリックすると、form配下にある全てを取得して「type」属性を表示する
サンプルコードとなります。
※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。
<!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>
const hoge = () => {
const form = document.getElementById('frm')
disp(form.elements, "fuga");
}
//フロントに表示する関数
const disp = (arr, id) => {
let text = [];
Array.from(arr).forEach((v) => text.push('<li class="list-group-item">' + v.type + '</li>'))
document.getElementById(id).innerHTML = text.join('');
}
window.onload = () => {
btn.onclick = () => { hoge() };
}
</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" 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="mb-6">
<label class="block text-gray-700 text-sm font-bold mb-2" for="password">
Password
</label>
<input
class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
id="password" type="password" placeholder="******************">
</div>
<div class="flex items-center justify-between">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
Sign In
</button>
</div>
</form>
<h1 class="font-semibold text-blue-500 text-lg mr-auto">実行結果</h1>
<ul id="fuga" class="font-semibold text-lg mr-auto"></ul>
<button id="btn"
class="mb-2 md:mb-0 bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
実行
</button>
</div>
</div>
</body>
</html>
取得されていることが確認できます。
-
前の記事
javascript 数値の桁数を取得する 2022.10.15
-
次の記事
Oracle Database ユーザーにプロファイルを設定する 2022.10.15
コメントを書く