PHPではフォーム内の同一名のオブジェクト(正式な呼び方がわかりません)の数を取得する事ができますが、JavaScriptではできないのでしょうか。
PHPでは 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ベストアンサー
- 回答日時:
同じ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#getElements …
ご回答、ありがとうございます。
おかげさまで、なんとか解決しそうです。
koumokuと言うエレメントは、後続処理でPOST送信してPHPで処理する必要があったので、koumoku[0]、koumoku[1]と配列(PHPが受け取った時に配列になるよう)にしていました。
このままではうまくいかなかったので、後からいただいた回答を参考に、エレメント名のkoumoku[0]、[1]を[]にして、いただいたソースを
var koumoku = document.getElementsByName('koumoku[]');
にする事で、うまくいきました。
まだ、テスト用のプログラムで動作確認しただけですが、作成中のプログラムにうまく組み込めそうです。
No.4
- 回答日時:
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にしかないメソッドなので複数フォームに跨って存在すると使いづらいです。)
この回答への補足
この場をお借りしまして、ご回答いただいた皆様にお礼申しあげます。
また、最終的な報告もさせていただきます。
この事でしばらく悩んだのと、別の事に手をとられていたので、報告と締め切りが遅れてしまいました。
いずれの方法でもうまくいきそうでしたので、最初は、記述の少ない「f.elements[name]」を導入しました。
最初の内はそれとなしに動作していたので気づかなかったのですが、ふと正しく動作していない事に気づきました。
<SELECT>オブジェクトに対して f.elements[name].length をした時に、同一名の<SELECT>オブジェクトが複数ある時には求めていた要素数が得られ正しく動作するのですが、同一名の<SELECT>オブジェクトが1つの時には 1 ではなく、<SELECT>内の<OPTION>の数を要素数として返してくるようなのです。
確かに、<SELECT>オブジェクトの .lengthプロパティは「選択項目の数を返す」と本にも書いてました。
動作としては当たり前なのですが、同一名が1つの時と複数の時で得られる値の元が異なっているのです。
何が起こっているのか最初は見当もつかなかったのですが、色々と試しているとどうもそのような具合でした。
改めてこの動作について質問するのもはばかられたので、「document.getElementsByName」に切り替えてみました。
もしかしたら .lengthプロパティについては同じ動作をするのではないかと思いましたが、不思議とこちらは 1 を返してきました。
では逆に、この方法で<SELECT>内の<OPTION>の数を知るにはどうするのか、と言う疑問も残りますが、今回は<OPTION>としての要素数は問題にはしていないので追究はしませんでした。
と言うわけで、最終的には「getElementsByName」を導入させていただきました。
皆様、ありがとうございました。
締め切り処理は日を改めますので、もしかこの2つの謎について何かご存知の方がいらっしゃいましたら、追加回答してください。
ご回答、ありがとうございます。
おかげさまで、なんとか解決できそうです。
どこかで見たソースが、名前を調べながら似たような処理をしていたので、私は質問で書いた方法しか思いつけませんでした。
名前の中から"["を見つけて、それより前方の文字列の確認、だったと思います。
質問では「含む」と書いてしまったのは、なぜか、JavaScriptでは配列として扱えない、と言う誤解があったからです。
これもどこかで見たんだと思います。
PHPで処理できる形状とは異なった(これも私の思い込み)配列はJavaScriptでもあったんですね。
教えていただいた name="koumoku[]" と言う省略の記述方法を知りませんでした。
この記述方法でなにもかもうまくいった感じがしています。
PHPで受け取った時には [] は同じ名前のその順に [0]、[1]と配列に展開されていたので、「へえええ」とうなってしまいました。
フォーム.elements['koumoku[]'][n]
当然、このような書き方も想像できませんでしたが、想像できたとしても、要素数が変動するので、この[n]を何回処理するかと言う問題は解決できずにいたと思います。
『「含む」でなく、一致する』
まさに、一致する必要があったのですね。
こちらも、重大なヒントになりました。
document.getElemensByName を document.form.getElemensByName と書いてうまくいかなかったのは、複数フォームにまたがっていても、全部一緒に参照できるために form がいらなかったのですね。
今回はフォームは単一なので、問題はありません。
テスト用のプログラムで動作確認はできました。
これから、本体プログラムへ組み込んでみます。
No.3
- 回答日時:
まっとうにやるなら、フォームの要素をループで拾って、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>
ヒントの言葉がなかったら、後からいただいた回答の [] が理解できずにいたかも知れません。
ご回答、ありがとうございます。
なんとか解決できそうです。
英語は苦手なので翻訳サイトで翻訳してもらって読みました。
getElementsByNameと言う関数がある事がわかりましたが、
用法がわからなくて、戸惑いました。
document.form.getElementsByName と form をつけていたり、
koumoku[0]、koumoku[1]と言う風にエレメントを作っていたので、
getElementsByName('koumoku') では正しい結果が得られなかったり。
でも、後からいただいた回答と、色々試してみて、用法も少しわかってきたように思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
新しくフォルダを作成したい
-
jqueryでtextareaのcols、rows...
-
テキストエリアをenterキーでフ...
-
hiddenを動的に作成したい
-
ボタンを押すとテキストボック...
-
【jQuery】input nameの文字列...
-
Enterで指定のテキストボックス...
-
name属性のないformタグの、中...
-
cookie使用時にundefinedと表示...
-
複数のテキストフィールドを同...
-
return trueとreturn falseの用...
-
FormのonsubmitでJavaスクリプ...
-
value内に変数を入れたい
-
VBSでブラウザ上のテキストボッ...
-
文末の改行コードを削除したい
-
特定<table>内の<td>の色を変える
-
送信フォームで送信ボタンをお...
-
Selectボックスの幅を自動で広...
-
VB.NET DateTimeの型について
-
ボタン無しでフォーム内容送信
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【jQuery】input nameの文字列...
-
新しくフォルダを作成したい
-
動的にTabindexの値を変えたい!
-
JavaScriptにて動的に配列を作...
-
name属性のないformタグの、中...
-
ファイル選択ダイアログが表示...
-
ラジオボタンでクリックした値...
-
ASP.NETでNAME属性を固定にしたい
-
cookie使用時にundefinedと表示...
-
テキストボックスの入力をリセット
-
Javascriptでのbuttonのname属...
-
ボタンを押すとテキストボック...
-
javascriptの値をformのinput h...
-
複数のテキストフィールドを同...
-
二つの入力欄に、同時に同じ文...
-
doPostBack 関数について
-
テキストボックスの値同士を比...
-
ひ孫に当たるiframe から親ウイ...
-
フォームの一部をPOSTで送信で...
-
出発駅A、到着駅Bを選択すると...
おすすめ情報