Javascriptで同じクラスを持つ複数の入力値を取得する
6806 ワード
Javascriptを使って、任意のHTML要素にアクセスする方法です。
同じクラスのinput(入力値）を取得
例えば、このようなコンタクトフォームがあるとします。
index.html
<h2>お問い合わせフォーム</h2>
<form class="contactForm" action="" method="post">
<table>
<tr>
<th><label>お名前</label></th>
<td><input class="item" type="text" name="name" value="タンジロウ"></td>
</tr>
<tr>
<th><label>メールアドレス</label></th>
<td><input class="item" type="email" name="email" value="[email protected]"></td>
</tr>
<tr>
<th><label>電話番号</label></th>
<td><input class="item" type="tel" name="tel" value="090-1234-5678"></td>
</tr>
<tr>
<th><label>お問い合わせ内容</label></th>
<td><textarea class="item" name="message">お問い合わせ内容テキスト</textarea></td>
</tr>
<tr>
<td><input type="submit" id="submitBtn" name="btn_confirm" value="送信"></td>
</tr>
</form>
</table>
全ての入力値に適切な値が入っているかを確認する為に、同じクラスitemをキーに要素を取得します。
getElementsByClassName
getElementsByClassNameは同じクラス名を検索して、返り値に配列風のHTMLCollectionを返します。elementにsがついていることに注意してください。
main.js
const ItemList = document.getElementsByClassName("item");
for(let i = 0; i < ItemList.length; i++) {
console.log(ItemList.item(i).value);
}
コンソールの出力結果
コンソールの出力結果です。Itemにアクセスすることで好きな値をチェックすることができます。
クラス名を複数指定すると、and指定となり両方のクラスを持つ要素を取得できます。
document.getElementsByClassName("item email")
HTMLCollectionを配列に変換
配列に変換することで、配列のメソッドが使えるようにすることもできます。用途によって、使い分けましょう。
main.js
const ItemArray = Array.prototype.slice.call(ItemList);
ItemArray.forEach(function(array) {
console.log(array);
});
コンソールの出力結果
Author And Source
この問題について(Javascriptで同じクラスを持つ複数の入力値を取得する), 我々は、より多くの情報をここで見つけました https://qiita.com/tetsu-upstr/items/726fcf7404791a5c6ebd著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .