現在、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ベストアンサー
- 回答日時:
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
- 回答日時:
受け取り側が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
- 回答日時:
こんにちは
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
- 回答日時:
#2,#3です。
「元の渡したい配列」、というのがよくわからんので
具体的なコードはかけません。
Javascript部分より、むしろHTML部分を補足してもらって
HTML中の、この部分をこういうルールで二次元配列にして渡したい。
とか聞いてもらったほうがわかるかも?
steel_grayさん、度々回答ありがとうございます。
#2の回答をもう一度読み直していたら自分が間違った理解を
してましたので、もう一度頭の中を整理して試してみたいと
思います。
また、分からなければご質問するかもしれませんが、
よろしくお願い致します。
No.4
- 回答日時:
こんにちは
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
- 回答日時:
#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
- 回答日時:
var hiddenObj = document.createElement("HIDDEN");
は、とりあえずこうした方がよいのでは?
var hiddenObj = document.createElement("INPUT");
hiddenObj.setAttribute("type","hidden");
で、2次配列の状態で渡すのであれば
そうなるようhiddenObjをかいて、formObjに複数回appendChildして
やればいいでしょう
yamabejpさん、返答ありがとうございます。
まず、
var hiddenObj = document.createElement("HIDDEN");
の記述間違ってました。
修正ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- C言語・C++・C# C#テキストボックスの文字を配列にいれてその後表示する 4 2022/07/17 04:47
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript gasについて 1 2022/05/31 21:51
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
このQ&Aを見た人はこんなQ&Aも見ています
-
「どうして捨てられないの?」前妻の物を捨てられない男性の心理って?
前妻の物を捨てられない理由に加え、捨てるための手段はあるのかを専門家に聞いてみた!
-
<input type=hidden" >で配列(複数の要素)を渡したいとき?"
PHP
-
JavaScriptにて動的に配列を作成して、POSTで渡したい
JavaScript
-
hiddenのvalueの値を変えたい
JavaScript
-
-
4
StrutsでJSPからListを受け取りたい
Java
-
5
配列をhiddenで
PHP
-
6
javascriptでセレクトボックスのselected"を動的につ"
JavaScript
-
7
Javascript_submit()完了後に処理したい
JavaScript
-
8
javascriptの値をformのinput hiddenに入れたい
JavaScript
-
9
JSPで<SELECT>の中にDBから持ってきたデータを反映させたい
Java
-
10
含まない言い方ってどうしたらいいんでしょうか
日本語
-
11
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
12
<a href=#" …>の意味を教えてください。"
HTML・CSS
-
13
ウィンドウのサイズを変えても表示を崩れないようにしたい
HTML・CSS
-
14
テーブルとテーブルの間隔について
HTML・CSS
-
15
Javascriptの値をJava(JSP)へ渡す方法
Java
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
value内に変数を入れたい
-
[C#]連想配列の中に配列を入れたい
-
チェックボックスがundefinedと...
-
VB.NET DateTimeの型について
-
ラジオボタンの値取得
-
javascriptでhiddenに二次元配...
-
テキストボックスに入力された...
-
return trueとreturn falseの用...
-
プルダウン選択を変更すると、...
-
slickのレスポンシブ > center...
-
FormのonsubmitでJavaスクリプ...
-
onchangeイベントを強制的に発...
-
submitがおされた同時に JavaSc...
-
select要素のvalueを配列で取得...
-
Selectボックスの幅を自動で広...
-
HTMLファイル同士での値渡し
-
ラジオボタンの値でリンク先を...
-
ラジオボタンとプルダウンを連...
-
Selectの中身をfor文で入れる
-
JQuery selectが反映されない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
value内に変数を入れたい
-
hiddenのvalueの値を変えたい
-
javascriptでhiddenに二次元配...
-
複数のsubmitボタンで押された...
-
テキストボックスに入力された...
-
switchを使って四則演算のプロ...
-
VB.NET DateTimeの型について
-
クイズ作成:15個の問題から5個...
-
C言語クイックソートの比較総回...
-
セレクトボックスの初期選択状...
-
ラジオボタンの選択で解答・点...
-
子から親へチェックボックスの...
-
ラジオボタンと連動して文字列...
-
setIntervalの間隔を途中で変更...
-
JAVASCRIPTで、ボタンを押した...
-
sessionStorageを調べています。
-
クリックの度に加算していくには?
-
マクロ オブジェクト変数With...
-
3桁区切りのカンマをつけたい...
-
selectboxのoptionタグのvalue...
おすすめ情報