- ベストアンサー
親ウィンドから子ウィンドへのデータの受け渡し方法
- 親ウィンドから子ウィンドへのデータ受け渡し方法を簡単に記述します。
- 親ウィンドから子ウィンドへのデータの受け渡し方法でエラーが発生しています。
- エラー内容は指定の形式に誤りがあることが原因です。
- ryota777
- お礼率48% (12/25)
- JavaScript
- 回答数7
- ありがとう数8
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
>i<=3の3の部分が不確定なら、 そうなると場合分けをしっかりしたほうがよいでしょう。 まずinput要素のtextタイプをしらべ、一致するものがあれば 受け渡すというやり方がベターかと。 （下の例ではわざと、親子間に存在しない要素をいれときました。） >0123となってしまう 型が認識されてないようなのでparseIntしてみてください //parent.htm <form id="parent_form0"> <input type="text" name="IN1"> <input type="text" name="IN3"> <input type="text" name="IN01"> <input type="text" name="IN100"><br /> 合計：<input type="text" name="total"> <input type="button" value="childを開く" onClick="window.open('child.htm','_blank')"> </form> //child.htm <head> <script> window.onload=function(){ var pForm=window.opener.document.getElementById('parent_form0'); var cForm=document.getElementById('child_form0'); for(var i=0;i<pForm.length;i++){ if(pForm[i].type=="text" && pForm[i].name.match(/IN[0-9]*/) && cForm[pForm[i].name]) cForm[pForm[i].name].value = pForm[i].value; } } function c2p(cForm){ var pForm=window.opener.document.getElementById('parent_form0'); var cForm=document.getElementById('child_form0'); var total = 0; for(var i=0;i<cForm.length;i++){ if(cForm[i].type=="text" && cForm[i].name.match(/IN[0-9]*/) && pForm[cForm[i].name]){ pForm[cForm[i].name].value = cForm[i].value; total += parseInt(cForm[i].value); } } if(pForm['total']) pForm['total'].value=total; } </script> </head> <body> <form id="child_form0"> <input type="text" name="IN1"> <input type="text" name="IN2"> <input type="text" name="IN01"> <input type="text" name="IN100"> <input type="button" value="parentに値を渡す" onClick="c2p()"> </form> </body>
その他の回答 (6)
- yambejp
- ベストアンサー率51% (3827/7415)
ごめんなさい、 ご提示のソース、どうもバグバグしていて、なにをやりたいかいまいち 理解できません。 ポストをベースに親子間でデータのやりとりをやるならjavascriptは不要です。 中途半端につかうくらいならすべてPHPでやってしまったほうがよいのでは？ ちなみにここはjavascriptのカテなのでjavascriptなら#5で十分だと思います。 PHPベースに切り替えるなら混乱をさけるためここを閉じてPHPのカテできいてください
お礼
#5以前を参考に四苦八苦して、何とか完成しました。何度もの質問に答えていただき有難うございました。
- yambejp
- ベストアンサー率51% (3827/7415)
サーバー側のプログラムはPHPということでしょうか？ であれば・・・ cForm['IN<?=$_GET['line'];?>'].value = pForm['IN<?=$_GET['line'];?>'].value; のようなやり方にしてはいかがでしょうか？ （厳密にはもうチョイ工夫が必要そうですが） ただ、たとえばjavascriptを外部ファイル化したりすることまで 視野に入れると、GETでの値の受け渡しはあまり美しくないと思います。 今回の命題が入力ダイアログということであれば、ある程度javascript 限定の機能でよろしいかと。 （javascriptが使えないならparentウィンドウで入力すれば済むので。）
お礼
GETの取り込みはできるようになりました。有難う御座いました。 質問当初は子ウィンドより親ウィンドに渡せればいいと思っていたのですが、本当は最初に親⇒子に渡し、再度子⇒親がBestですので、ここまできたら何とか仕上げたいと思います。 宜しければ、教えていただけますか。 //parent.htm <form id="parent_form0"> <?php for ($i=1; $1<=##; $i++) { print "<input type=\"hidden\" name=\"max".$i."\" value=\"2\" />"; print "<input type=\"text\" name=\"A_IN".$i."_1\" value=\"$_POST['A_IN'.$i]\" />"; print "<input type=\"text\" name=\"A_IN".$i."_2\" value=\"$_POST['A_IN'.$i]\" />"; print "<input type=\"hidden\" name=\"max".$i."\" value=\"3\" />"; print "<input type=\"text\" name=\"A_IN".$i."_1\" value=\"$_POST['A_IN'.$i]\" />"; print "<input type=\"text\" name=\"A_IN".$i."_2\" value=\"$_POST['A_IN'.$i]\" />"; print "<input type=\"text\" name=\"A_IN".$i."_3\" value=\"$_POST['A_IN'.$i]\" />"; } ?> </form> //child.htm <script> window.onload=function(){ var pForm=window.opener.document.getElementById('parent_form0'); var cForm=document.getElementById('child_form0'); var line = <?php print $_GET['line'] ?>; var max = pForm['career_kensu'+line].value; 取り込めます form['max'].value = opnerform['career_kensu'+line].value; 取り込めません for(var i=1;i<=max;i++){ cForm['IN'+i].value = pForm['A_IN'+line+'_'+i].value; } for(var i=0;i<pForm.length;i++){ if(pForm[i].type=="text" && pForm[i].name.match(/A_IN'+line+'_[0-9]*/) && cForm[pForm[i].name]) cForm[記述がわかりません].value = pForm[i].value; } } </script> <form id="child_form0"> <?php print "<input type=\"hidden\" name=\"max\" value=\"$_POST['max']\" />"; for ($1=1; $1<=$max; $i++;> print "<input type=\"text\" name=\"IN".$i."\" value=\"$_POST['IN'.$i]\" />"; } ?> </form>
- yambejp
- ベストアンサー率51% (3827/7415)
読み間違えました申し訳ないです。 「親から子」でしたね。 こんな風にしてください //parent.htm <form id="parent_form0"> <input type="text" name="IN1"> <input type="text" name="IN2"> <input type="text" name="IN3"> <input type="button" value="childを開く" onClick="window.open('child.htm','_blank')"> </form> //child.htm <script> window.onload=function(){ var pForm=window.opener.document.getElementById('parent_form0'); var cForm=document.getElementById('child_form0'); for(var i=1;i<=3;i++){ cForm['IN'+i].value = pForm['IN'+i].value; } } function c2p(cForm){ var pForm=window.opener.document.getElementById('parent_form0'); for(var i=1;i<=3;i++){ pForm['IN'+i].value = cForm['IN'+i].value; } } </script> <form id="child_form0"> <input type="text" name="IN1"> <input type="text" name="IN2"> <input type="text" name="IN3"> <input type="button" value="parentに値を渡す" onClick="c2p(this.form)"> </form>
お礼
データの受け渡しができました、ホントありがとう御座いました。 ちなみに、 window.onload=function(){ var pForm=window.opener.document.getElementById('parent_form0'); var cForm=document.getElementById('child_form0'); for(var i=1;i<=3;i++){ cForm['IN'+i].value = pForm['IN'+i].value; } } の部分は、親から子への受け渡しだと思うのですが、 i<=3の3の部分が不確定なら、 max=pForm['親のname'+i].value; でいけるのでしょうか？ あと、実際は function c2p(cForm){ var pForm=window.opener.document.getElementById('parent_form0'); var total = 0; for(var i=1;i<=3;i++){ pForm['IN'+i].value = cForm['IN'+i].value; total = total + cForm['IN'+i].value; } pForm['total'+i].value = total; } なのですが、1,2,3と＋すると、0123となってしまうのですが、どこか間違っているのでしょうか。間違っているからこうなるのですが。思考錯誤してみましたが、同じ結果になります。 よろしければご教授お願い致します。
- yambejp
- ベストアンサー率51% (3827/7415)
formに名前をつけるのはNG（動くものもあるが動作保障外）。 idでやってください。 evalを回避するのは以下のようにしてください。 //parent.htm <form id="parent_form0['IN'+i].value"> <input type="text" name="IN1"> <input type="text" name="IN2"> <input type="text" name="IN3"> <input type="button" value="childを開く" onClick="window.open('child.htm','_blank')"> </form> //child.htm <script> function c2p(cForm){ var pForm=window.opener.document.getElementById('parent_form0'); for(var i=1;i<=3;i++){ pForm['IN'+i].value = cForm['IN'+i].value; } } </script> <form id="child_form0"> <input type="text" name="IN1" value="a"> <input type="text" name="IN2" value="b"> <input type="text" name="IN3" value="c"> <input type="button" value="parentに値を渡す" onClick="c2p(this.form)"> </form>
お礼
解りやすいご回答有難う御座います。 ちなみに //parent.htm <form id="parent_form0"> <input type="text" name="IN1" value=""> <input type="text" name="IN2" value=""> <input type="text" name="IN3" value=""> <input type="button" value="childを開く" onClick="window.open('child.htm','_blank')"> </form> での受け渡しはできないのでしょうか？ よくわかりませんが、parent_form0には、他の入力項目もありますのでおかしくなってしまわないでしょうか？
- OKbokuzyo
- ベストアンサー率43% (130/296)
#1です。 eval化してる理由がなんとなく見えましたので追記します。 質問文と同じことで、おそらくiをループさせて番号を付与している関係で、使用しているのですね。 トリッキーというかなんというか‥。 eval化は便利そうに見えていろいろ問題を抱えますし、 今回はevalを使わずとも他の方法は十分にあるという感じがしますので、 個人的には使用しない方がいいかと思います。 よくわからないのであれば、evalは使わない方向で考える方が無難です。（クセになるのもよくないので）
お礼
ご回答有難うございます。 明日、会社で試してみたいと思います。 開発暦半年くらいで、phpの勉強は多少したのですが、javaはほとんど勉強せず、他を参考に悪戦苦闘しています。基本や理屈がほとんどわかってないので、どうしょうもないですね。 ちなみに、evalを使用しないでの方法を教えていただければ嬉しいです。
- OKbokuzyo
- ベストアンサー率43% (130/296)
'+i+'が文字列になっているけど‥？ そういうことではなくて？ 書き間違い？ そういう風にしようと思うとname属性はきびしいかも。 自前で関数つくればそれっぽいものはできるだろうけど。 name属性じゃなくてid属性を使っては？ 例えば、 window.opener.document.getElementById("IN" + i) = eval('form.IN'+i+'.value'); //eval化してる理由がよくわからんけど、前後が分からんのでとりあえず放置。 こんな感じで。 getElementsByNameってのもあるけど、IEだったかFFだったか（多分IE）が対応してなかったと思う。
お礼
毎回、ご丁寧な記述でわかり易く、有難うございます。 parentでちゃんと受け渡すことができました。 申し訳御座いません。 質問の記述が間違っておりました。 <input type="text" name="IN3"> の値のみ参照したい場合、現在$_GET['line']で3を渡す方法を考えております。その再、 window.onload=function(){ var pForm=window.opener.document.getElementById('parent_form0'); var cForm=document.getElementById('child_form0'); cForm['IN'+line].value = pForm['IN'+line].value; } } となると思うのですが、window.onload時点で$_GETの値を参照する方法がネット検索してもわからないのですが。$_GETで渡す方法はキレイではないかもしれませんが、宜しければお願い致します。 ※ちなみに先程の回答の意味あいは「length」が理解不足だよ思いますが、流れ的には理解はできたと思いますので、勉強になりました。