フォーム内の同一名のエレメントの数を調べる方法

質問

ＰＨＰではフォーム内の同一名のオブジェクト（正式な呼び方がわかりません）の数を取得する事ができますが、JavaScriptではできないのでしょうか。

ＰＨＰでは submit された時に $_POST で同一名のオブジェクトを配列で受け取り、その要素数を取得する事ができます。
たぶん、こんな感じ。
　$koumoku = $_POST["koumoku"];
　$cnt = count($koumoku);

JavaScriptではエレメントの配列と言う考え方が容易でないのか、まったくないのか、エレメント「koumoku[0]」や「koumoku[1]」はこの文字列全体がエレメント名になっていて、[0][1]をインデックスとする配列としては扱えなかったと思います。
それはそれでいいのですが、例えばこのフォーム内から「koumoku」と言う文字列を持つ名前のエレメントの数を、何かしらの関数で調べる方法はないのでしょうか。
あれば、その方法を教えてください。

同一名のオブジェクトの個数回のループ処理がしたいだけなのですが、この個数が変動するのでプログラム内で固定のループ処理にできないで困っています。

なければ document.form.element.length の回数分、document.form.element[x].name で名前を調べながら処理しようと思っています。
そう言う方法が一般的なのでしょうか。

回答No.2

pick52 · ベストアンサー

同じname属性を持つエレメントオブジェクトを取得したいということ
でしょうか。
それなら document.getElementsByName() で取得できます。

var koumoku = document.getElementsByName('koumoku');
for(var i = 0; i < koumoku.length; i++) {
alert(koumoku[i].value);
}

参考URL：

http://www.tohoho-web.com/js/dom.htm#getElementsByName

お礼

ご回答、ありがとうございます。
おかげさまで、なんとか解決しそうです。

koumokuと言うエレメントは、後続処理でPOST送信してPHPで処理する必要があったので、koumoku[0]、koumoku[1]と配列（PHPが受け取った時に配列になるよう）にしていました。
このままではうまくいかなかったので、後からいただいた回答を参考に、エレメント名のkoumoku[0]、[1]を[]にして、いただいたソースを
var koumoku = document.getElementsByName('koumoku[]');
にする事で、うまくいきました。

まだ、テスト用のプログラムで動作確認しただけですが、作成中のプログラムにうまく組み込めそうです。

回答No.4

steel_gray

koumokuという文字列を「含む」nameを処理したいというのであれば、
＞document.form.element.length の回数分、
document.form.element[x].name で名前を調べながら処理
ぐらいしか思いつきません。

ただ、配列表現として
name="koumoku[]" みたいにインデックスが省略されているなら
フォーム.elements['koumoku[]'][n] と、javascriptでも配列で扱えます。

「含む」でなく、一致する、という事で、かつ、document内の複数フォームに同じものがなければ#1,#2さんが紹介されているようにdocument.getElemensByName が使えます。
(getElementsByTagNameのようなElementのメソッドではなくdocumentにしかないメソッドなので複数フォームに跨って存在すると使いづらいです。)

お礼

ご回答、ありがとうございます。
おかげさまで、なんとか解決できそうです。

どこかで見たソースが、名前を調べながら似たような処理をしていたので、私は質問で書いた方法しか思いつけませんでした。
名前の中から"["を見つけて、それより前方の文字列の確認、だったと思います。
質問では「含む」と書いてしまったのは、なぜか、JavaScriptでは配列として扱えない、と言う誤解があったからです。
これもどこかで見たんだと思います。
PHPで処理できる形状とは異なった（これも私の思い込み）配列はJavaScriptでもあったんですね。

教えていただいた name="koumoku[]" と言う省略の記述方法を知りませんでした。
この記述方法でなにもかもうまくいった感じがしています。
PHPで受け取った時には [] は同じ名前のその順に [0]、[1]と配列に展開されていたので、「へえええ」とうなってしまいました。

フォーム.elements['koumoku[]'][n]
当然、このような書き方も想像できませんでしたが、想像できたとしても、要素数が変動するので、この[n]を何回処理するかと言う問題は解決できずにいたと思います。

『「含む」でなく、一致する』
まさに、一致する必要があったのですね。
こちらも、重大なヒントになりました。

document.getElemensByName を document.form.getElemensByName と書いてうまくいかなかったのは、複数フォームにまたがっていても、全部一緒に参照できるために form がいらなかったのですね。
今回はフォームは単一なので、問題はありません。

テスト用のプログラムで動作確認はできました。
これから、本体プログラムへ組み込んでみます。

補足

この場をお借りしまして、ご回答いただいた皆様にお礼申しあげます。

また、最終的な報告もさせていただきます。
この事でしばらく悩んだのと、別の事に手をとられていたので、報告と締め切りが遅れてしまいました。

いずれの方法でもうまくいきそうでしたので、最初は、記述の少ない「f.elements[name]」を導入しました。
最初の内はそれとなしに動作していたので気づかなかったのですが、ふと正しく動作していない事に気づきました。
<SELECT>オブジェクトに対して f.elements[name].length をした時に、同一名の<SELECT>オブジェクトが複数ある時には求めていた要素数が得られ正しく動作するのですが、同一名の<SELECT>オブジェクトが１つの時には 1 ではなく、<SELECT>内の<OPTION>の数を要素数として返してくるようなのです。
確かに、<SELECT>オブジェクトの .lengthプロパティは「選択項目の数を返す」と本にも書いてました。
動作としては当たり前なのですが、同一名が１つの時と複数の時で得られる値の元が異なっているのです。
何が起こっているのか最初は見当もつかなかったのですが、色々と試しているとどうもそのような具合でした。
改めてこの動作について質問するのもはばかられたので、「document.getElementsByName」に切り替えてみました。
もしかしたら .lengthプロパティについては同じ動作をするのではないかと思いましたが、不思議とこちらは 1 を返してきました。
では逆に、この方法で<SELECT>内の<OPTION>の数を知るにはどうするのか、と言う疑問も残りますが、今回は<OPTION>としての要素数は問題にはしていないので追究はしませんでした。

と言うわけで、最終的には「getElementsByName」を導入させていただきました。

皆様、ありがとうございました。

締め切り処理は日を改めますので、もしかこの２つの謎について何かご存知の方がいらっしゃいましたら、追加回答してください。

回答No.3

yambejp

まっとうにやるなら、フォームの要素をループで拾って、nameが
合致した分カウントアップしてやる・・・というフローですが、
以下のような姑息なやり方でも拾えます。

<script>
function check(f,name){
var l=0;
if(f.elements[name]){
l=(l=f.elements[name].length)?l:1;
}
alert(l);
}
</script>

<form>
項目1:<input type="text" name="koumoku1"><br>
項目2-1:<input type="text" name="koumoku2"><br>
項目2-2:<input type="text" name="koumoku2"><br>
項目2-3:<input type="text" name="koumoku2"><br>
<input type="button" value="check1" onClick="check(this.form,'koumoku1')">
<input type="button" value="check2" onClick="check(this.form,'koumoku2')">
<input type="button" value="check3" onClick="check(this.form,'koumoku3')">
</form>

javascriptの場合、ユニークな要素は配列にならず、同名の要素があると
配列になるという若干面倒な仕組みなので、
(1)要素がない(2)要素がひとつだけ(3)要素が複数
という場合分けが必要です。

お礼

ご回答、ありがとうございます。
おかげさまで、なんとか解決しそうです。

重要なヒントをいただきました。
「ユニークな要素は配列にならず、同名の要素があると配列になる」
この事がまったくわかっていなかったので、困っていました。

いただきましたソースも、難なく動作したので理解できたと思います。

私が片手にしているJavaScriptの本（上司から授かった）には、このような事が書かれていなかったので、色々とインターネットで探してはいたのですが、逆引きと言うか、したい事から調べられるもののうち、これだ、と言うのが見つからないでいました。

実は、
l=(l=f.elements[name].length)?l:1;
これの意味もよくわからなかったので、
l=f.elements[name].length
これでもいいのかと思って試して、
その結果の違いから、「?l:1」この部分を自分なりに理解しました。

先の回答へのお礼でも書いたのですが、PHPでの処理のため、エレメント名をkoumoku[]として組み合わせて、値の確認もしてみました。
<script>
function check(f,name){
var l=0;
if(f.elements[name]){
l=(l=f.elements[name].length)?l:1;
}
alert(l);
for(i=0;i<l;i++){
alert(f.elements[name][i].value);
}
}
</script>

ヒントの言葉がなかったら、後からいただいた回答の [] が理解できずにいたかも知れません。

回答No.1

himajin100000

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-71555259

お礼

ご回答、ありがとうございます。
なんとか解決できそうです。

英語は苦手なので翻訳サイトで翻訳してもらって読みました。
getElementsByNameと言う関数がある事がわかりましたが、
用法がわからなくて、戸惑いました。

document.form.getElementsByName と form をつけていたり、
koumoku[0]、koumoku[1]と言う風にエレメントを作っていたので、
getElementsByName('koumoku') では正しい結果が得られなかったり。

でも、後からいただいた回答と、色々試してみて、用法も少しわかってきたように思います。