###前提・実現したいこと
現在製作中のWEBアプリケーションで、以下の機能を実装したいです。
- 親ウィンドウから、子ウィンドウを開く。
- 子ウィンドウで各種inputの情報を入力する。
- 子ウィンドウでsubmitした時に、親ウィンドウで子ウィンドウのinputの値を受け取る。
- 子ウィンドウを閉じる。
これら一連の動作ですが、jQueryなどで実現可能でしょうか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
ベストアンサー
どうもこんにちは。
ここから回答
jQueryなどで実現可能でしょうか?
できます。
HTML, CSS, jQueryを使い、このように書くことができます。
親ウィンドウ
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>親ウィンドウ</title> 6</head> 7<body> 8<form name="parent_form"> 9 <label>ここに子ウィンドウから受け取った値が代入されます。 10 <textarea name="parent_textarea" class="parent_textarea"></textarea> 11 </label> 12</form> 13 14<a target="child_window" onClick="open_window()" style="color: deepskyblue"> 15 子ウィンドウを開く 16</a> 17 18<script type="text/javascript" src="jquery.js"></script> 19<script type="text/javascript"> 20 function open_window(url) { 21 window.open("children.html", "child_window", "width=400, height=300, menubar=no, toolbar=no, scrollbars=yes"); 22 } 23</script> 24</body> 25</html>
子ウィンドウは次のようになります。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>子供ウィンドウ</title> 6</head> 7<body> 8<form name="form1" id="form1"> 9 <input id="input_1" name="input_1" type="text" value=""> 10 <button onclick="message_sender(document.form1.input_1.value)">送信</button> 11</form> 12<script type="text/javascript" src="jquery.js"></script> 13<script type="text/javascript"> 14 var message = ""; 15 function message_sender(message) { 16 window.opener.$(".parent_textarea").val(message); 17 } 18</script> 19</body> 20</html>
走り書きですので、動かないところや、タイプミスなどがあると思いますので、わからないところがありましたらコメントなどをよろしくおねがいします。
以上、少し乱暴ですが、回答を終わります。
投稿2016/11/20 15:13
編集2016/11/20 15:15退会済みユーザー
総合スコア0
0
別ウィンドウを開いてsubmitする方法もありますが、ウィンドウ内にモーダルウィンドウを作ってそこで入力するほうが躓きにくいと思います。
【初心者でも分かる!モーダルウィンドウの作り方】
https://syncer.jp/jquery-modal-window
【画面中央に表示するモーダルウィンドウを実装したい | Tips Note by TAM】
http://www.tam-tam.co.jp/tipsnote/html_css/post8031.html
【【jQuery】超簡単に実装できるモーダル・ポップアップ[Remodal]の使い方 - ONZE】
http://on-ze.com/archives/4500
「モーダルウィンドウ jquery」などで検索するともっと色々出てくると思います。
投稿2016/11/20 15:02
総合スコア69398
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/20 15:28