質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

18613閲覧

子ウィンドウから親ウィンドウに値を渡したい。

chapp

総合スコア233

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2015/03/28 15:36

お世話になっております。
javascriptにて子ウィンドウから親ウィンドウに値の受渡しについてご教示下さい。

parent.htm

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> </head> <body> <script> function openChild(f){ window.open("child.htm","_blank", "width=200,height=200"); } </script> <form> チェックボックスデータ:<input id="hoge"><br /> テキストデータ:<input id="hoge2"><br /> <input type="button" onclick="openChild(this.form)" value="子ウィンドを開く"> </form> </body> </html>

child.htm

<html> <head> <title>子ウィンドウ</title> </head> <body> <script> function sendtoParent(f){ var str=""; for (var i=0;i<f.length;i++){ if(f[i].type=="checkbox" && f[i].checked){ str+=(str==""?"":",")+f[i].value; } } opener.document.getElementById("hoge").value=str; } </script> <form> <input type="checkbox" id="data1" value="データ1"><label for="data1">データ1</label> <input type="checkbox" id="data2" value="データ2"><label for="data2">データ2</label> <input type="checkbox" id="data3" value="データ3"><label for="data3">データ3</label><br /> <input id="txtdata"> <input type="button" onclick="sendtoParent(this.form)" value="親に送る"> </form> </body> </html>

上記のような親ウィンドウであるparent.htmと、子ウィンドウとなるchild.htmがあります。

子ウィンドウを開き、チェックボックスにチェックを入れたものは、親ウィンドウの<input id="hoge">に値が反映されますが、同時に子ウィンドウの<input id="txtdata">に入力した値も<input id="hoge2">に反映させたいと思っていますが、なかなか出来ずに立ち止まってしましました。

お忙しいなか恐縮ですがご指導のほどお願い出来れば幸いです。
宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

sendtoParent()内に以下を追記だけではないでしょうか?

lang

1opener.document.getElementById("hoge2").value = document.getElementById("txtdata").value;

引数fを使いたいのであればdocument.getElementById("txtdata").valueの部分を変更する必要があります。


追記

child.htm(body内)

lang

1<script> 2function sendtoParent(f){ 3 var str=""; 4 for (var i=0;i<f.length;i++){ 5 if(f[i].type=="checkbox" && f[i].checked){ 6 str+=(str==""?"":",")+f[i].value; 7 } 8 } 9 opener.document.getElementById("hoge").value=str; 10 opener.document.getElementById("hoge2").value = document.getElementById("txtdata").value; 11} 12</script> 13 14<form> 15 <input type="checkbox" id="data1" value="データ1"><label for="data1">データ1</label> 16 <input type="checkbox" id="data2" value="データ2"><label for="data2">データ2</label> 17 <input type="checkbox" id="data3" value="データ3"><label for="data3">データ3</label><br /> 18 <input id="txtdata"> 19 <input type="button" onclick="sendtoParent(this.form)" value="親に送る"> 20</form> 21 22<hr> 23 24<form> 25 <input type="checkbox" id="data4" value="データ4"><label for="data4">データ4</label> 26 <input type="checkbox" id="data5" value="データ5"><label for="data5">データ5</label> 27 <input type="checkbox" id="data6" value="データ6"><label for="data6">データ6</label><br /> 28 <input id="txtdata"> 29 <input type="button" onclick="sendtoParent(this.form)" value="親に送る"> 30</form>

例えば上記のようにform要素が2つある場合、下側の親に送るボタンをクリックしたときにチェックボックスの値は正しく送られますが、テキストボックスの内容は下で入力した内容ではなく、上で入力した内容が送られます。
(ID要素が2つあることはスルーしてください)

ボタンをクリックしたときにsendtoParent()の引数にクリックした箇所のフォームが渡ります。
先ほど提示したコードでチェックボックスの内容はそのフォームを参照していますが、
テキストボックスは引数を見ずにグローバルなテキストボックスを参照しています。
ですので、HTML上で最初に出現した箇所のid=txtdataの値が入ります。
(試しに<body>タグの直後に<input id="txtdata">を追記するとその値が使われると思います)

入力したフォームの値を参照したいのであれば引数fで渡ってきたフォームの値を親ウィンドウに渡してあげる必要があります。

これで回答になりましたでしょうか?

投稿2015/03/29 01:26

編集2015/03/29 02:16
PruneMazui

総合スコア227

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chapp

2015/03/29 01:50

PruneMazuiさん ご親切なアドバイスをありがとうございます。 ご指摘の通り、上記1文を加えることで望んでいた結果を得ることが出来ました! ただ、すみません、改めて質問なのですが、引数fについて触れていますが、この引数とはどういったものなのでしょうか?本件に関連した例を出して頂けるとありがたいです。 当方、これまでPHPなどサーバーサイドプログラムにばかり偏ったものしか縁がありませんでした。 今、javascriptの引数についてもパッと調べてみましたが、本件に関連するような使い方がイメージ出来ずに質問している次第です。 今回の質問に関してPruneMazuiさんのおかげで解決できたものの、再度の質問に恐縮です。 ひとまずベストアンサーとさせて頂きますが、もしお手隙の時あれば、本件に関わる引数についてご教示いただければ幸いです。
chapp

2015/03/29 03:05

PruneMazuiさん お忙しい中、ご親切なアドバイスをありがとうございます。 なるほど~って感じです。 まだまだ理解には乏しいですが、これから色々なケースを学べればと思います。 ありがとうございました!
guest

0

http://www.tagindex.com/javascript/window/main_to_sub1.html

ここのサイトに載ってるやり方はどうでしょう。。。

投稿2015/03/29 00:37

ManabuHayashi

総合スコア17

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chapp

2015/03/29 01:39

ManabuHayashiさん ご親切なアドバイスをありがとうございます。 勉強不足なためか、ご紹介して頂いた内容を、本件に応用する事が出来ませんでした。
guest

0

postMessage()を使用すれば恐らく可能であると考えられます。

MDN/window.postMessage
window.postMessage()の学習
上記サイトに詳しく説明されていますので閲覧してみてはどうでしょうか。
また、わからない場合postMessageで検索して情報を集めてみるといいかと思います。

投稿2015/03/28 18:13

Cf_cwd

総合スコア730

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chapp

2015/03/29 01:37

Cf_cwdさん 夜遅くご親切なアドバイスをありがとうございます。 ただいま、ご紹介して頂いたサイトを拝見していましたが、これまでjavascriptのようなクライアントサイドのプログラムにははあまり縁が無かったので、とても勉強になります。奥が深そうですね。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問