JavaScriptコミュの【質問】子ウィンドウで生成したテキストボックスの値渡しについて

はじめまして！
JavaScriptは初心者ですが、よろしくお願いします。

さっそくですが、質問です。

いま、JavaScriptで子ウィンドウを表示して、子ウィンドウからボタンをクリックすると、親ウィンドウへ、商品名とテキストボックスを表示させるプログラムを作成しています。（たとえば3回クリックすると、3つテキストボックスが表示されるといったものです。）
親ウィンドウ上に表示されたテキストボックスに入力した値を他のページへ遷移した際にPOSTで値渡しをするプログラムを作成したいのですが、どのようにすればよろしいでしょうか。
テキストボックスが複数個あった場合には、配列として値を渡したいです。

ちなみに、現在は以下のようなソースコードを書いています。

＜JavaScript＞
(addShohin.js)

var count = 0;

function addShohin( name ){
var txt = new Object();

　　//名前
　　txt["name"] = window.opener.document.createTextNode( name );

　　//個数
　　txt["num"] = window.opener.document.createElement( "input" );
　　txt["num"].type = "text";
　　txt["num"].name = "num["+ count +"]";
　　txt["num"].size = "5";

　　var t = window.opener.document.createElement( "span" );

　　t.appendChild( txt["name"] );
　　t.appendChild( txt["num"] );

　　window.opener.document.getElementsByTagName("table")["sample"].appendChild( t );

　　//値渡し用
　　var hidden = new Object();
　　hidden["name"] = window.opener.document.createElement("input");
　　hidden["name"].type = "hidden";
　　hidden["name"].name = "t_name"+ count;
　　hidden["name"].value = name;

　　hidden["num"] = window.opener.document.createElement("input");
　　hidden["num"].type = "hidden";
　　hidden["num"].name = "t_num"+ count;
　　hidden["num"].value = text["num"].value;

　　window.opener.document.forms["regist"].appendChild( hidden["name"] );
　　window.opener.document.forms["regist"].appendChild( hidden["num"] );

　　window.opener.document.getElementById( "count" ).value = ++count;
}

＜html＞
(main.html)

（中略）

<form method="POST" action="next.html">
<div id="hoge">
<table id="sample">
　　<tr><td>商品名</td><td>個数</td></tr>
</table>
<input type="button" name="child_disp" value="子ウィンドウ表示" size="30" onclick="window.open( "sub.html" )" />
</div>

<input type="submit" name="regist" value="次ページへ" />
<input type="hidden" name="count" id="count">
</form>

(sub.html)

中略

<input type="button" value="親ウィンドウへ追加" onClick="addShohin('○○');" />

※ ○○にはPHPで取得した名前が入りました。ここでは省略しました。

名前の値渡しはできるのですが、個数の値渡しができません。
JavaScript側がテキストボックスに入力した値を認識できれば解決だと思うのですが…。それか、別の方法を考えた方がいいのでしょうか。。。

わかりにくい説明で恐縮です。
詳しい方、どうかご教授よろしくお願い致します。

コメント(12)

最初
全て
最新の40件

[1] mixiユーザー 11月16日 01:51

親ウィンドウ側に関数を作成して、
子ウィンドウ側から引数として値を渡すのではダメですか？

[2] mixiユーザー 11月16日 09:14

addShohin()内での、count値は正しいのでしょうか？
それとも、受け渡しが正しくいっていない？
JavaScriptのエラーとかはでていないですか？
どこでうまくいっていないか、切り分けができればいいですよね。

[3] mixiユーザー 11月16日 12:33

＞ZeaL萌えさん
コメントありがとうございます。
すいません、説明が不足していました

値の受渡しをするのは、親ウィンドウ(main.html) と子ウィンドウ(sub.html) 間ではなく、main.htmlと次に遷移するページ間です。

子ウィンドウの役割は、あくまでテキストボックスと名前を親ウィンドウ上に表示するまでです。
（ボタンをクリックした回数分だけ、親ウィンドウ上に表示されます）

それ以降は、子ウィンドウは閉じてしまって、親ウィンドウのテキストボックスに値を入力して、POSTでhiddenとして値を渡したいのですが。。。

[4] mixiユーザー 11月16日 12:41

＞スプーさん
コメントありがとうございます。

ひとつずつ回答を。
・ countの値は、正常に動作しています。
・子ウィンドウ(sub.html) で「親ウィンドウへ追加」ボタンをクリックすると、親ウィンドウ上に名前とテキストボックスが表示されます。
・ JavaScriptのエラーは出ていません。

いま、問題となっているのは、上にも書きましたが、、、
main.html上のテキストボックス（JavaScriptで動的に作成したもの）に値を入力し、次ページへ遷移する際にPOSTで値を渡したいのですが、変数に値が格納できていないということです。

[5] mixiユーザー 11月16日 13:48

ようやく意味が分かりました。

オペレーションとしては、

１．子ウィンドウで商品を追加ボタンをクリックする。
２．親ウィンドウにその商品と個数のテキストボックスが表示される。
３．親ウィンドウにて個数を入力
４．次のページへその個数も渡したい（渡す値としては、hiddenにて。

ということでしょうか？
　hidden["num"].value = text["num"].value;
でhiddenに入れているつもりですか？

ここでこのように書いても無理だと思いますので、
次のページへのボタン押下時に値を入れる処理をいれるか、そのままtextの値を参照してはだめなのでしょうか？

見当はずれな回答だとしたらすみません。
一応ソース参考に作ろうとしましたが、動きませんでした（汗）

[7] mixiユーザー 11月16日 17:04

ちょっとやってみました。
小窓側。

var DOC = (!window.opener || window.opener.closed) ? null : window.opener.document ; if(!DOC) return;
var FORM = DOC.getElementsByTagName("form")[0]; // 親窓のform要素

function Item(item_name){
    this.label = DOC.createTextNode(item_name);
    this.count = 0;
    this.textfield = DOC.createElement("input");
    this.span = DOC.createElement("span");
    this.Init();
}
Item.prototype = {
    Init : function(){ // アイテム名とテキストボックスを追加
        this.textfield.type = "text";
        this.textfield.size = 5;
        this.textfield.value = this.count;
        var p = DOC.createElement("p");
        this.span.appendChild(this.label);
        p.appendChild(this.span);
        p.appendChild(this.textfield);
        FORM.appendChild(p);
        this.addItem();
    },
    addItem : function(){ // 個数を変更
        this.count++;
        this.textfield.name = "num[" + this.count + "]";
        this.textfield.value = this.count;
    }
};

window.onload = function(){
    var dat = {}; // アイテム保存用
    var b = document.getElementsByTagName("button");
    for(var i=0 , l=b.length ; i<l ; i++)(function(button){
        var item_name = button.innerHTML;
        button.onclick = function(){
            if(!dat[item_name]) dat[item_name] = new Item(item_name);
            else dat[item_name].addItem();
        }
    })(b[i]);
}

<ul>
<li><button>アイテム1</button></li>
<li><button>アイテム2</button></li>
<li><button>アイテム3</button></li>
</ul>

たぶん、このnameの付け方だと、個数が同じだとかぶるんだけど、
質問意図がよくわかってないからかなあ。

[8] mixiユーザー 11月16日 17:42

>JavaScript側がテキストボックスに入力した値を認識できれば解決だと思うのですが…。それか、別の方法を考えた方がいいのでしょうか。。。

なんでそんな余計なことする必要あるんでしょうか？
素直にPOST値受け取ればいいだけな気がするんですが・・・
name属性をt_num***にしたいなら
>txt["num"].name = "num["+ count +"]";
これ変えればいいだけですし。

でも
>テキストボックスが複数個あった場合には、配列として値を渡したいです
と書いてある割に名称のほうが配列になっていない矛盾・・・はて。

とりあえず
>hidden["num"].value = text["num"].value;
タイポ

>window.opener.document.forms["regist"]
存在しない。

手打ちミスならいいんですが、コピペならそもそも動作していないはず。

[9] mixiユーザー 11月16日 19:03

＞スプーさん
はい、そのとおりです。わかりにくい説明ですみません＞＜

>次のページへのボタン押下時に値を入れる処理をいれるか、そのままtextの値を参照してはだめなのでしょうか？

そうですね。textの値をそのまま参照したいのですが、どのようにすればいいのか・・・

このままだと動かないですね、すみません‥
main.htmlの<form method="POST" action="next.html"> に、name="regist"をつけるのを忘れましたm(_ _)m

[10] mixiユーザー 11月17日 10:18

drawkingさん。
　var t = window.opener.document.createElement( "span" );

　　t.appendChild( txt["name"] );
　　t.appendChild( txt["num"] );

　　window.opener.document.getElementsByTagName("table")["sample"].appendChild( t );

のところ、SPANでは、テーブルに追加しても、列が増えないので、ちょっと以下のソースで、やってみました。

var row = table.insertRow(-1);
var cell = row.insertCell(0);
cell.appendChild(txt["name"]);
cell = row.insertCell(1);
cell.appendChild(txt["num"]);

にしました。

そうすると、numは配列になっているので、
次のページでは、$_POST['num'][n]　（ｎは０～count値）
で見れるのではないでしょうか？

または、registのsubmitボタンを普通のボタンに変えて、onclickで値をHiddenに入れてから、submitする関数を呼び出すか。

解決できたでしょうか？

[11] mixiユーザー 12月27日 22:27

すみません、ずいぶんと返事が遅くなってしまいました＞＜

無事、解決できました。
コメントしていただいた皆様、ありがとうございましたm(_ _)m

[12] mixiユーザー 12月27日 22:34

解決したのならどの様に解決したか書くべきじゃないでしょうか？

ログインすると、みんなのコメントがもっと見れるよ