JavaScriptにて動的に配列を作成して、POSTで渡したい

独学でJavaScriptの勉強をしているものです。
勉強用に作っているサイトにて、どうしてもやり方がわからないことがあるので、教えて下さい。

以下のようなフォームがあったとします。

<form name="testForm1">
<input type="hidden" name="id" value="1" />
<input type="checkbox" name="check" />
</form>

このフォームは動的に複数作成され、idのvalueはフォームごとに別の値が入ります。

それで行いたいことは、複数あるtestForm1から、チェックボックスにチェックが付いているidだけを取得して、別のページにPOSTで渡したいんです。

以下のようなスクリプトを書いたのですが、思うように動作してくれませんでした。

<form action="hoge" name="testForm2" method="post">
<input type="hidden" name="id" />
</form>

function func() {
var idArray = new Array();
for ( count = 0; count < document.testForm1.length; count++ ) {
if ( document.testForm1.check.checked == true ) {
idArray.push( document.testForm.id.value );
}
}
document.testForm2.id.value=idArray;
document.testForm2.submit();
}

JavaScriptに関しては独学で必要に応じて勉強している感じで、あまり基礎がわかっておらず、もしかしたらかなり的外れな質問になってしまっているかもしれませんが、どうか宜しくお願い致します。

No.7 ベストアンサー 回答者： babu_baboo 回答日時： 2009/10/07 18:51

<input type="checkbox" name="fuga" value="xxxx">

<input type="checkbox" name="fuga" value="xxxx">
<input type="checkbox" name="fuga" value="xxxx">
<input type="checkbox" name="fuga" value="xxxx">


var a = document.getElementsByTagName( 'fuga' );
var c , o, b = [ ];

for( c = 0; o = a[ c++ ]; ) if( a.checked ) b.push( a.value );
document.getElementById( 'yyyy' ).value = b.join(',');
とか。

この回答へのお礼

返答ありがとうございます。
お礼が遅くなってすみません。

配列ではなく、カンマ区切りというのも一つの方法として良いかもしれませんね。

ただ、今回の例はhiddenで値を渡すようになっているんですけど、実際はユーザが入力したtextの値を渡したいんです。
そうなると、ユーザがそのテキストボックスにカンマを入力してしまうと、不具合が出てしまって…

もう少し、自分のほうでも検討してみます。

お礼日時：2009/10/13 13:11

No.10 回答者： babu_baboo 回答日時： 2009/10/08 07:09

＃７です

val += ',' + element.value;
じぶんもpushつかっているのにいうのもへんですが
おそくなるかも。
b[b.length]=a.value;

No.9 回答者： fujillin 回答日時： 2009/10/07 19:35

#4です。

＞あとは、その配列をどうやって渡せばいいのかがわからなくて…
#4にも書きましたが、そのままでもいけそうかも…（ダメなブラウザがあるかも）
ちゃんとやるなら、#7様のようにjoinを使うとか、toStoring()を利用するとか…
連結されたデータになるので、後で分解して解釈する必要がありますが、データの中にカンマが入っていたりすると正しく分解できませんね。

記録するときに、配列を使わなくても
　val += ',' + element.value;
みたいなのでも良さそう。

ご質問文のように、Form2のエレメントにセットして、Form2をsubmitすればそのまま送信されるはずです。
試しに、method="get"で適当なHTMLに対して送ってみれば、URLのserch部分に内容が表示されるので確認しやすいかと思います。
（データが長い場合は文字数制限があるはずなので無理）

------------------------------------------------
＞サーバ側はPHPで、Smartyのforeachを使って動的にフォームを増やし
＞ています。
一旦、HTMLを吐き出した後は変わらないのですよね？
だとすると、吐き出すときにそれぞれを<form>～</form>で小分けして出力せずに全体で一つのformになるようにしてしまえば、スクリプトで処理しなくともそのままsubmitしてしまえると思いますが…　
（＝受け取った側で処理をする考え←どうせ何らかの処理が必要だから）

この回答へのお礼

ご返答ありがとうございます。
お礼が遅くなってしまってすみません。

自分なりにも色々と調べてみた結果、やっと問題点がはっきりしてきました。

最初に書いた質問の内容と少しズレてしまいますし、ちょっとわかりにくくなってしまっているので、改めて内容をまとめて、質問させていただきます。

お礼日時：2009/10/13 13:13

No.8 回答者： babu_baboo 回答日時： 2009/10/07 18:52

あっ！ていせい！

var a = document.getElementsByTagName( 'fuga' );

じゃなくて
var a = document.getElementsByName( 'fuga' );

No.6 回答者： babu_baboo 回答日時： 2009/10/07 17:27

<input type="checkbox" name="fuga" value="xxxx">

にして、そのcheckedがtrueだけあつめれば？

この回答へのお礼

ご返答ありがとうございます。

チェックが付いているidだけをあつめることはできました。

あとは、それをPOSTで渡したいのですが、どうすればいいのかわからなくて…

お礼日時：2009/10/07 18:29

No.5 回答者： 15mm 回答日時： 2009/10/07 17:13

まず仕様を変更したほうがいいです。

name属性を使用しているのは妥協するとしても、"id"という名前を振るのは好ましくないです。

document.testForm.id.value（testForm1？1抜けてる？）のところで説明しますと、
document.testFormはHTMLオブジェクトで、
HTMLオブジェクトには標準でidというプロパティが既に存在しています。
つまり、document.testForm.idは、
testFormの中にある<input type="hidden" name="id" />ではなく
testFormの<form id="">の部分を参照しに行こうとするわけです。

それと、<form name="testForm1">という、同じ名前の<form>がたくさん作られているのだとしたら、
forループでの参照の仕方も間違えてます。同じ対象を何回も処理するようにできています。


とりあえず、今の使用のままで押し通すなら、
document.getElementsByName()
を駆使して関数を組みなおしてみましょう。
document.getElementsByName("testForm1")で、 name="testForm1" となっているHTML要素のリストを得られます。

この回答へのお礼

ご返答ありがとうございます。

＞name属性を使用しているのは妥協するとしても、"id"という名前を振るのは好ましくないです。
idという名前はここに書き込みをするのに分かりやすい名前のほうがいいかと思って付けたので、実際のソースでは別の名前にしてあります。

かえって、わかりにくくなってしまってすみませんでした。

また、No4様への返答にも書かせて頂いたのですが、チェックを付けたidの値を全て取得するところまではできているようなんです。

あとは、その配列をどうやって渡せばいいのかがわからなくて…

もしお時間があるようでしたら、教えて下さい。

お礼日時：2009/10/07 18:26

No.4 回答者： fujillin 回答日時： 2009/10/07 17:12

同じく独学の者です。

name="testForm"というformが複数あるのだと想像しますが…
document.testForm1.checkだと要素が特定できていないはずです。

試しに、alert(document.testForm1.check);などとしてみれば分かると思います。（要素なら[object]など、不明ならundefinedなどが返る）

var frm = document.forms['testForm1'];
などとしておいて、
　frm[count].check または frm[count].element['check']
などでアクセスすればよろしいかと…（ちょっと書き方を変えてます）

＞document.testForm2.id.value = idArray;
idArrayは配列なので、単独の属性のvalueには代入できないかと思ったら、どうやらtoString()と同じ形式で代入されているみたいですね。

----------------------------------------------
でも、必ずこのような処理をするのであれば、testForm1をいっぱい作らずに、一つのformの中に各項目（hiddenとcheckbox）を複数いれてしまえば処理しなくてもそのままsubmitできそうな気がするけれど。
（受け取った側で、必要なデータだけ選択すればよい）

なんかの理由があって、formが複数作られてしまう（どうやって動的に作っているのか知りませんが）のであれば、ロード時にDOM操作でtestForm1を一つにまとめてしまうという手もあるかも。
（レイアウト等がどうなっているのかわかりませんので無理なのかも。まぁ、後でやるか先にやるかの違いだけで、同じことだって言えば同じことですね。）

この回答へのお礼

ご返答ありがとうございます。

＞document.testForm1.checkだと要素が特定できていないはずです。
これは私の記述ミスでした。
実際には、
document.testForm1[count].check
という風にしています。

試しに
for ( count = 0; count < idArray.length; count++ ) {
alert( idArray[count] );
}
としてみたところ、こちらの意図したとおり、チェックしたIDだけが表示されてくれたのですが、そのidArrayをどうやってPOSTで渡せばいいのかが未だにわからなくて…

＞どうやって動的に作っているのか知りませんが
サーバ側はPHPで、Smartyのforeachを使って動的にフォームを増やしています。

もう少し、自分でも頑張って調べてみます。

お礼日時：2009/10/07 18:22

No.3 回答者： Chary_spy 回答日時： 2009/10/07 17:09

ふたたびすみません。

＞思うように動作してくれませんでした

ここから下のコードはそのまま書いていますか?
もしそうだとしたら、ＨＴＭＬとScriptがごっちゃに書かれています

<script type="text/javascript">
</script>
でスクリプトの部分をくくらないとだめです。

また、func()と言うユーザー関数を作成していますが、これを実行している所がないですよね。form action=hoge ?????
submit()とボタンはどこへいったのでしょう。

この回答へのお礼

ご返答ありがとうございます。

＞ここから下のコードはそのまま書いていますか?
わかりにくくなると思って簡略化して書いたのですが、実際にはそのままではなく、スクリプトとHTMLの部分は分けて書いてあります。

func()に関しても、別に用意したボタンのonClickで実行するようにしてあります。

わかりにくくてすみませんでした。

testForm2に関しては、JavaScriptで使う受け皿のようなイメージで書いたので、submitはJavaScript以外からすることがないため、submitボタンなどは記述しませんでした。

必ず必要なものなのでしょうか？

また、
idArray[(idArray.length)] = XXXX;
のXXXXには、何を記述すべきなのでしょうか？

重ねての質問で申し訳ないのですが、お時間がありましたら教えて下さい。

お礼日時：2009/10/07 18:14

No.2 回答者： Chary_spy 回答日時： 2009/10/07 16:52

すみません。

idArray[(idArray.length)] = XXXX;
でした

No.1 回答者： Chary_spy 回答日時： 2009/10/07 16:45

idArray[count] = XXX;

とするだけです。自動的に配列が作られます。Ｃ＋＋とから見ると、そんな作り方ではあぶないな（メモリーが）。と言う事になりますが作れるんだからいいんです。