- ベストアンサー
JavaScriptでフォーム内配列要素の要素数を取得する方法
- JavaScriptを使って、フォーム内の配列要素の要素数を取得する方法について教えてください。
- 具体的な例として、下記のようなフォームがあります。
- JavaScriptを使用して、各フォームの要素数を取得し、それを制御する方法を教えてください。
- ralf124c
- お礼率52% (10/19)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
inputタグのnameに []を使っても、JavaScript上では 配列や連想配列には、なってくれないようなので フォームオブジェクトのelements["nameでつけた名前そのまま"]で 入ってくれているのを取り出すしかないようです。 ただ、form上で <input type="text" name="scf[配列1][]" value=""> <input type="text" name="scf[配列1][]" value=""> <input type="text" name="scf[配列1][]" value=""> のように、nameがまったく同じであれば n = document.forms.f.elements["scf[配列1][]"].length で name="scf[配列1][]"が 3個あるというのは取り出せます。 しかし <input type="text" name="scf[配列1][0]" value=""> <input type="text" name="scf[配列1][1]" value=""> <input type="text" name="scf[配列1][2]" value=""> のようになっていると elements[]内では、 "scf[配列1][0]" "scf[配列1][1]" "scf[配列1][2]" のように異なる名前になっているので、 document.forms.f.elements["scf[配列1][]"].length や document.forms.f.elements["scf[配列1]"].length としても、そんなオブジェクトはないというエラーになってしまいます。 なのでこの場合、泥臭いですが n = 0; for ( i = 0; i < document.forms.f.elements.length; i++ ) { if (document.forms.f.elements[i].name.match(/scf\[配列１\]\[[0-9]+\]/)) n++; //elements[i].nameを scf[配列1][数値]の正規表現でマッチさせてカウント } って感じでカウントするしかないのでしょう。 もしくは、elements[]に入っているnameを使って配列に変換してくれる 汎用的な関数があれば、それを使うのが簡単そうですが、 ただ、formで入ってきたname値をなんでもかんでも配列に変換してしまうと この処理に前に作っておいた変数を上書きしてしまう危険もあるし 場合によっては、XSS攻撃されてしまうので慎重にしたほうがよいかもです。 他に適切な方法があるようなら私も知りたいです。
その他の回答 (1)
- Proof4
- ベストアンサー率78% (151/192)
要素をクエリセレクタを用いて取得すると簡単に実現できます。具体的には const nLenA = document.querySelectorAll('[name^="scf[配列1]"]').length; のようにします。 [name^="scf[配列1]"] がクエリセレクタで、name属性の値が scf[配列1] で前方一致する要素をすべて取得します。
