詳しい人求む！

Javascriptの小ウインドウから親ウインドウに値渡しについて

解決済

質問者：tekitoukamo
質問日時：2017/04/18 14:47
回答数：2件

Javascript勉強中です。
よろしくお願いします。

以下のは親ウインドウから小ウインドウ開いたときに小ウインドウで好きなデータを選択して親ウインドウに自動入力させたい物の小ウインドウソースです。
ただこれですと常にform1のデータが親ウインドウのに戻ってしまいますのでおそらく区別出来る設定有ると思うのですが調べてもわかりませんでしたので書かせて頂きました。
よろしくお願いします。
※特にこの形式にこだわっている感じでもなく小ウインドウから複数データからそれぞれのデータ選択で親ウインドウに自動入力できれば大丈夫です。

<html>
<head>
<script Language="JavaScript"></script>
</head>
<body>
<form name="form1">
<input type="text" id="input1" value="222"><br>
<input type="text" id="input2" value="222"><br>
<input type="button" onclick="setData()">
</form>
<form name="form2">
<input type="text" id="input1" value="333"><br>
<input type="text" id="input2" value="333"><br>
<input type="button" onclick="setData()">
</form>
</body>
</html>

画像URLですが
&（アンド）が自動変換されててエラーが出てますのでURLのアンドを小文字に書き換えて下さい。
http://or2.mobi/index.php?mode=image＆file=153778.jpg

No.2の回答に寄せられた補足コメントです。補足日時：2017/04/19 11:13
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

参考程度に

No.1

回答者： fujillin
回答日時：2017/04/18 17:53

こんにちは

実際には何をなさりたいのかよくわかりませんが、それはおいておくとして・・・

値を取得するのに
＞document.getElementById("input1").value
＞document.getElementById("input2").value
などとしていますが、ご提示のHTML文書には同じidの要素が複数あります。
（idは本来一意のはずなので、構文違反といえます）

エラーとなってもおかしくはないのですが、大半のブラウザは最初にある該当要素（＝ご提示の場合、form1内のinput要素）を対象とするようです。
このあたりをきちんと識別できるようにしてあげれば、解決できるのではないでしょうか？

＞特にこの形式にこだわっている感じでもなく～～
であるなら、input要素の内容はユーザが入力可能なので、form自体を一つにしてしまえば問題はなくなるのではないかと思いますが・・・？

ついでながら…
最近のブラウザではquerySelectorが利用できますので、必ずしもidやクラスを個々の要素に振らなくても、比較的簡単に要素を指定することは可能です。
https://developer.mozilla.org/ja/docs/Web/API/El …

また、ご提示のスクリプトで、一方では、
＞document.getElementById("input1")
という指定の方法をとっているのに対して、他方では、
＞window.opener.frm1.box1
という方法なのも、なんだかアンバランスさを感じるところです…

- 0
- 件

通報する

この回答へのお礼

fujillin様
書き込みありがとう御座います。
やりたい事は小ウインドウでユーザー情報一覧が表示されて選択したユーザーだけの情報が親ウインドウに自動入力させたいものです。
ですので複数ユーザーが小ウインドウに表示される場合は、名前、電話番号などほぼ同じ項目が繰り返しとなります、ですのであえてFormわけして同じ名前にしました。
よろしくお願いします。

通報する

お礼日時：2017/04/18 18:15

No.2ベストアンサー

回答者： fujillin
回答日時：2017/04/19 09:46

ANo1です。

＞よろしくお願いします。
うまくいかない理由は、すでにANo1に記したつもりなのですが・・・？

補足を読んでも、相変わらずさっぱりわかりませんけれど、ご提示のHTMLは基本的にそのままにすることとして、とりあえずこんな方法でも、取得なさりたい値は取れるのではないかと思います。
（補足を読む限りでは、input[type=text]でもなさそうな気がしますし、子ウィンドウの必要性もあるのかなとか…
また、ご質問とは関係ないけど、「名前や電話番号」って・・・）

※ 親文書の構成が不明なのでalert表示までとしています。
※ 処理に必要ないid等は省いてあります。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<script type="text/javascript">
document.addEventListener("click", function(e){
var inp, t = e.target;
if(t.nodeName != "INPUT" || t.type != "button") return;
inp = t.parentNode.querySelectorAll("input");

// 親文書が不明なので値の表示のみ
alert("Values are " + inp[0].value + " and " + inp[1].value);

}, false);
</script>
</head>

<body>

<form>
<input type="text" value="222" /><br />
<input type="text" value="222" /><br />
<input type="button" />
</form>
<form>
<input type="text" value="333" /><br />
<input type="text" value="333" /><br />
<input type="button" />
</form>

</body>
</html>

- 0
- 件

通報する

この回答へのお礼

書き込みありがとう御座います。
説明下手で申し訳ありません、頂いた方法で対応は出来そうなので使わせて頂きたいと思います。
一応やりたいこともは以下のURLに写真をアップロードしたのですが親ウインドウにユーザー情報を入力する箇所があり、小ウインドウから登録済みのユーザー情報を選択して自動入力出来たらと思ってました。
http://or2.mobi/index.php?mode=image&file=153778 …

通報する

お礼日時：2017/04/19 11:09

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！