javascriptでhiddenに二次元配列を格納したい

現在、Webのシステムでクライアント側のJavaScriptから
サーバー側のPHPに値を渡そうと思ってます。
その際に、JavaScriptの配列と連想配列を組み合わせた二次元配列に
値を格納してサーバー側に渡そうと思ってます。
それで以下のような方法を試しているのですが、
hiddenに二次元配列を格納する方法が分からず困ってます。
分かる方がいらしたら教えて頂けますでしょうか。
よろしくお願いいたします。

===========================================
var actionName = document.forms[0].action;
var bodyObj = document.body;
var formObj = document.createElement("FORM");
var hiddenObj = document.createElement("HIDDEN");

formObj.name = "updateTest";
formObj.action = actionName;
formObj.method = "post";

hiddenObj.name = "alltest[][]";

var norArr = new Array();
var hashArr = new Array();
var i = 1;

hashArr['test'] = document.getElementById("test" + i).value;
norArr[i-1] = hashArr;
hiddenObj.value = hashArr;

formObj.appendChild(hiddenObj);
bobyObj.appendChild(formObj);
formObj.submit();

No.2 ベストアンサー 回答者： steel_gray 回答日時： 2008/04/23 16:35

createElement("HIDDEN");

を使っているという事はIE専用のシステムだと思っていいですね？(※1)

IEではname属性を後からつける事ができません。（つける事はできるけど、それが反映されなかったりする。※2）
なのでcreateの時点でタグの文字列を渡してnameを付けます。
createElement("<INPUT type=HIDDEN name=alltest[][]>");


ただ、 alltest[][]というのはphpでは配列として扱えるかもしれませんが、javascriptにとっては変数（配列）ではなく、ただの名称に過ぎませんので、phpでそのまま使える配列を渡すというのは無理だと思います。


phpの事はわからないのであまり具体的な回答はできませんが、
配列を渡したければ、値の組み合わせを文字列として渡してphp内できちんとパースするか、
配列定義のコードを文字列として渡し、evalで実行するとか。
に、なると思います。
(evalで実行するコードは汚染チェックが必要なので充分注意が必要です、むしろ面倒になる気がする。)


※1 createElementに要素名以外の開始タグやinputのtypeを渡して、とかいう妙な動作が可能なのはIEだけです。
※2 name以外に、type属性もradioは設定できないとか、これまた珍妙なバグもあります。

この回答へのお礼

steel_grayさん、返答ありがとうございます。
JavaScriptに関しては、詳しくないので
createElement("HIDDEN");
がIE専用とは知りませんでした。

>値の組み合わせを文字列として渡してphp内できちんとパースするか
なるほど、こういう方法もあるのですね。
試してみたいと思います。

お礼日時：2008/04/23 17:10

No.7 回答者： yambejp 回答日時： 2008/04/26 13:35

受け取り側がPHPなら配列っぽく渡せば、いけるんじゃないかなぁ・・・

こんなかんじでわかります？

<?
$all=$_REQUEST["all"];
if(is_array($all)) print_r($all);
?>

<script type="text/javascript">
function hoge(f){
/*
all[1][2]="a";
all[1][3]="b";
all[4][5]="c";
all[4][6]="d";
とします
*/
var all={1:{2:'a',3:'b'},4:{5:'c',6:'d'}};
for(var i in all){
var obj=all[i];
for(var j in obj){
var tag=document.createElement("input");
tag.setAttribute("type","hidden");
tag.setAttribute("name","all["+i+"]["+j+"]");
tag.setAttribute("value",obj[j]);
f.appendChild(tag);
}
}
return true;
}
</script>
<form method="get" onsubmit="return hoge(this)">
<input type="submit" value="go">
</form>

No.6 回答者： leap_day 回答日時： 2008/04/24 16:19

こんにちは

hiddenObj.value = hashArr;になっていたのでvalue値に配列を入れるのかと思っていました・・・
hashArr = ["id=test1.value","id=test2.vaue"]
になってるので1次元配列ですね（－－；）

<form action="****">
<input type="text" id="test1">
<input type="text" id="test2">
<input type="text" id="sample1">
<input type="text" id="sample2">
</form>
の形になっていて

hashArr0 = ["test1.value","test2.value"];
hashArr1 = ["sample1.value","sample2.value"];
という風にして
norArr = [["test1.value","test1.value"],["sample1.value",sample2.value"]];
にして
#3のような形で吐き出したいということでしょうか？

<script type="text/javascript"><!--
function r() {
var actionName = document.forms[0].action;
var bodyObj = document.body;
var formObj = document.createElement("FORM");

formObj.name = "updateTest";
formObj.action = actionName;
formObj.method = "post";

var norArr = new Array();
var test = new Array();
var samp = new Array();

for(i=1;i<3;i++) { test[i-1] = document.getElementById("test" + i).value; }
for(i=1;i<3;i++) { samp[i-1] = document.getElementById("sample" + i).value; }

norArr[0] = test;
norArr[1] = samp;

for(i=0;i<norArr.length;i++) {
for(j=0;j<norArr[i].length;j++) {
var hiddenObj = document.createElement("input");
hiddenObj.type = "hidden";
hiddenObj.name = "all"+i+j;
hiddenObj.value = norArr[i][j];
formObj.appendChild(hiddenObj);
}
}
bodyObj.appendChild(formObj);
formObj.submit();
}
//--></script>


<form action="test.cgi" onsubmit="return false;">
<input type="text" id="test1">
<input type="text" id="test2">
<input type="text" id="sample1">
<input type="text" id="sample2">
</form>
<input type="button" value="送信" onclick="r()">

※onsubmit="return false;"はOperaでテキストフィールド内でreturn keyを押すと送信されちゃったので念のために入れてます
※formObj.method = "get";にしたり
hiddenObj.type = "hidden";　formObj.submit();を削除したりすれば
どのように生成されたとかどんな形で送信しているかとか見ることができますよ

この回答へのお礼

leap_dayさん、返答ありがとうございます。
まさにこのような方法をやりたいと思ってました。
でも、steel_grayさんが言われたように
配列として渡せないみたいなんですね。
ですので、「値の組み合わせを文字列として渡してphp内できちんとパースする」
という方法で取得しようと考えています。
どうもありがとうございました。

お礼日時：2008/04/25 15:34

No.5 回答者： steel_gray 回答日時： 2008/04/23 18:31

#2,#3です。

「元の渡したい配列」、というのがよくわからんので
具体的なコードはかけません。

Javascript部分より、むしろHTML部分を補足してもらって
HTML中の、この部分をこういうルールで二次元配列にして渡したい。
とか聞いてもらったほうがわかるかも？

この回答へのお礼

steel_grayさん、度々回答ありがとうございます。
#2の回答をもう一度読み直していたら自分が間違った理解を
してましたので、もう一度頭の中を整理して試してみたいと
思います。
また、分からなければご質問するかもしれませんが、
よろしくお願い致します。

お礼日時：2008/04/24 13:19

No.4 回答者： leap_day 回答日時： 2008/04/23 16:53

こんにちは

var hiddenObj = document.createElement("HIDDEN");
　→var hiddenObj = document.createElement("input");
　→hiddenObj.type = "hidden";

hiddenObj.value = hashArr;
　→hiddenObj.value = hashArr['test'];

bobyObj.appendChild(formObj);
　→bodyObj.appendChild(formObj);

では？

もしくは
var hashArr = new Array();
for(i=1;i<3;i++) {
hashArr[i-1] = document.getElementById("test" + i).value;
}
hiddenObj.value = hashArr;

※i<3;はid="test*"にあわせてください
上記は
<form action="****">
<input type="text" id="test1">
<input type="text" id="test2">
</form>
の場合

この回答への補足

leap_dayさん、回答ありがとうございます。
leap_dayさんの記述は、1次元配列の格納の場合でしょうか？
自分が知識不足かもしれませんが。
よろしくお願い致します。

補足日時：2008/04/24 13:06

No.3 回答者： steel_gray 回答日時： 2008/04/23 16:51

#2です、ちょっと追加。

#1さんのおっしゃるような方法ももちろん可能です。
下記のようにhidden項目を生成する。
<INPUT type=HIDDEN name=alltest[0][0] value="a">
<INPUT type=HIDDEN name=alltest[0][1] value="b">
<INPUT type=HIDDEN name=alltest[1][0] value="c">
<INPUT type=HIDDEN name=alltest[1][1] value="d">

この回答への補足

steel_grayさん、再度の回答ありがとうございます。
yambejpさんの言われた方法、つまり上記のようになるように
JavaScriptで記述できるのが理想なのですが、
現在の自分の技術で上手く生成できないのですが、
良ければ具体的な記述を教えて頂けますでしょうか。
よろしくお願いいたします。

補足日時：2008/04/23 17:24

No.1 回答者： yambejp 回答日時： 2008/04/23 15:54

var hiddenObj = document.createElement("HIDDEN");

は、とりあえずこうした方がよいのでは？

var hiddenObj = document.createElement("INPUT");
hiddenObj.setAttribute("type","hidden");

で、２次配列の状態で渡すのであれば
そうなるようhiddenObjをかいて、formObjに複数回appendChildして
やればいいでしょう

この回答へのお礼

yamabejpさん、返答ありがとうございます。
まず、
var hiddenObj = document.createElement("HIDDEN");
の記述間違ってました。
修正ありがとうございます。

お礼日時：2008/04/23 16:55