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で質問しましょう!
似たような質問が見つかりました
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- Java Java 南京錠 2 2023/02/04 11:46
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- JavaScript カラーミーショップのsectionループ内で、[引数][戻り値]ありの関数的な処理を行いたいです。 1 2022/05/07 19:39
- JavaScript オブジェクト配列の各メンバを任意の式で評価して、その評価値が最大のオブジェクトを返す関数はありますか 2 2023/05/20 15:02
- PHP 配列の値の更新方法について 1 2022/08/05 09:49
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- PHP PHPでCookieを使った訪問回数について 1 2023/05/28 14:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
submitボタン押下時にPOSTされ...
-
【jQuery】input nameの文字列...
-
テキストボックスの値同士を比...
-
新しくフォルダを作成したい
-
ボタンを押すとテキストボック...
-
Javascriptでのbuttonのname属...
-
テキストエリアをenterキーでフ...
-
テキストボックスの入力をリセット
-
javascriptの値をformのinput h...
-
エクセル マクロ submitについて
-
cookie使用時にundefinedと表示...
-
二つの入力欄に、同時に同じ文...
-
JavaScriptにて動的に配列を作...
-
複数のテキストフィールドを同...
-
フォームの一部をPOSTで送信で...
-
オーダーフォーム最終確認画面
-
name属性のないformタグの、中...
-
出発駅A、到着駅Bを選択すると...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【jQuery】input nameの文字列...
-
javascriptの値をformのinput h...
-
JavaScriptにて動的に配列を作...
-
新しくフォルダを作成したい
-
二つの入力欄に、同時に同じ文...
-
Javascriptでのbuttonのname属...
-
name属性のないformタグの、中...
-
テキストボックスの入力をリセット
-
出発駅A、到着駅Bを選択すると...
-
ASP.NETでNAME属性を固定にしたい
-
submitボタン押下時にPOSTされ...
-
ラジオボタンでクリックした値...
-
テキストボックスの値同士を比...
-
jqueryでtextareaのcols、rows...
-
入力フォームに半角スペース以...
-
cookie使用時にundefinedと表示...
-
ファイル選択ダイアログが表示...
-
テキストエリアをenterキーでフ...
-
hiddenを動的に作成したい
-
ボタンを押すとテキストボック...
おすすめ情報