質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

1166閲覧

form内部要素(input)について

kanetugu_70e

総合スコア100

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/03/11 09:48

実現したい事

javascriptでform内部要素の取得を行いたいです。
下記の例の様に、inputが2つ以上ある場合は、document.formsオブジェクト内に、inputで指定したname配列として格納されている事は確認でき、取得する事が出来ました。
しかし、inputが1つしか無い場合、これを取得する事が出来ません。
何か別の方法があるのでしょうか?
またRadioNodeListの解釈を間違えているのでしょうか?

条件

・HTML5
・ ECMA6
・ライブラリは使用せずネイティブなjavascriptである事

html

1< form id="test" action="test Action"> 2<input type="radio" name="select" value=""/> 3<input type="radio" name="select" value=""/> 4</form>

javascript

1document.forms.select[0].value=0; 2document.forms.select[1].value=1: 3 4

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

inputの数も分からないのであれば一旦、#test以下のinputを取得してからforで回して設定していくのはどうでしょうか?

var inputs = document.querySelectorAll('#test > input'); for (var i = 0; i < inputs.length; i++) {   inputs[i].value=i; }

投稿2019/03/13 08:24

編集2019/03/13 08:33
shuzi

総合スコア197

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kanetugu_70e

2019/03/13 19:26 編集

ご回答ありがとうございます。 実は、本質問コードに記載はございませんが、value設定はご提示頂いた方法で設定しております。 ただ、inputの個数については、わざわざJava側で用意してjsp側へ渡すという無駄なことをしていたので、input.lengthを使用させて頂きます。
guest

0

すでにお気づきのように、namedItem() は取得した個数により戻りが変わります。一つのときは要素がそのまま返ります。
https://www.w3.org/TR/html5/infrastructure.html#dom-htmlallcollection-nameditem

したがって、戻りを見て処理を分岐するか、.querySelectorAll() で確実にNodeList であるもの処理するかになるかと思います。

JavaScript

1document.forms[0].elements.namedItem('select').length; // 2 or undefined 2document.forms[0].querySelectorAll('[name="select"]').length; // 2 or 1

投稿2019/03/13 07:45

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kanetugu_70e

2019/03/13 19:20

ご回答ありがとうございます。 Nodeとして扱うかElementで扱うかといった事をこれまで意識してこなかった為、勉強になります。 今後は、DOMのインターフェイス階層を勉強しつつ、意識して使ってみたいと思います。
x_x

2019/03/14 05:53

回答には Node の話は出てきていませんが大丈夫でしょうか? まあ、Element は Node を継承しているので Node だとも言えますが、そんな話ではありません。
kanetugu_70e

2019/03/14 13:55

HTMLCollectionとNodeListを同列に扱うべきでないといった指摘と勘違いしておりました。 対象のCollection要素が二つ以上ある場合、namedItem()の戻り値は最初の一つしか帰らない為、ご記載頂いた判定処理が必要となる。 わざわざそんな事をするくらいなら、querySelector()でNodeListとして処理すべきという解釈でよろしいでしょうか?
x_x

2019/03/14 14:48

.querySelectorAll()ですね 些細な違いと思っているかもしれませんが、取れるものは違います。
x_x

2019/03/14 14:51

ちなみに、フォームコントロールには form 属性があるため、querySelectorAll() では対応しきれないところがあります。 厳密に扱うのであれば面倒でも form.elements を見たほうがいいでしょう。
kanetugu_70e

2019/03/14 23:52

失礼致しました。Allは記載漏れです。 HTMLFormElementなるインターフェースがあったのですね。勉強になります。 今回は質問のみならず、コメントへの指摘までして頂きありがとうございました。 誤った理解で今後混乱する所でした。
guest

0

ベストアンサー

querySelectorAllすれば1つでも複数でもNodeListで得られます
もちろんquerySelectorならHTMLElementで得られます

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 console.log(document.querySelectorAll('[name=select]')); 4 console.log(document.querySelectorAll('[name=select2]')); 5 console.log(document.querySelector('[name=select2]')); 6}); 7</script> 8<form> 9<input type="radio" name="select" value="1"> 10<input type="radio" name="select" value="2"> 11</form> 12<form> 13<input type="radio" name="select2" value="3"> 14</form>

投稿2019/03/11 09:59

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kanetugu_70e

2019/03/11 10:42

ご回答ありがとうございます。 つまるところ、RadioNodeListは対象が1つしか無い場合は、格納されないのでしょうか? と言いますのも、今回の質問はinputタグのvalue値へ、動的な値付けを行いたいといった背景がございます。 inputタグの数は、本htmlファイル(jsp)読み込みまで分からないという条件になっております。 必要でしたら、質問文のコードを修正致しますので、改めてご確認の程宜しくお願い致します。
yambejp

2019/03/13 07:56

select2は1つしかないですがつかめてますよね? そういうことを聞きたいのではないのでしょうか?
kanetugu_70e

2019/03/13 19:13

お恥ずかしい限りですが、取得できない原因はJava側のActionプログラムが原因でした。お騒がせして申し訳ございません。 また、一度DOMについて学び直した所、根本的にNodeとElementの区別が付いておりませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問