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 · ベストアンサー

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内できちんとパースするか
なるほど、こういう方法もあるのですね。
試してみたいと思います。

回答No.7

yambejp

受け取り側が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

こんにちは

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内できちんとパースする」
という方法で取得しようと考えています。
どうもありがとうございました。

回答No.5

steel_gray

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

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

お礼

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

回答No.4

leap_day

こんにちは

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次元配列の格納の場合でしょうか？
自分が知識不足かもしれませんが。
よろしくお願い致します。

回答No.3

steel_gray

#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で記述できるのが理想なのですが、
現在の自分の技術で上手く生成できないのですが、
良ければ具体的な記述を教えて頂けますでしょうか。
よろしくお願いいたします。

回答No.1

yambejp

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

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

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

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

お礼

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