モーダルウィンドウに表示されているテキストを取得し元画面のinput内に表示したい

現在ECサイトの注文画面を作成しています。

ログインユーザーが商品の送付先を入力する場合に前もって登録していた住所リストから送付先を選択できるような処理を実装予定です。

イメージとしては
以下の「お届け先リストから選択する」のラジオボタンを押すとモーダルウィンドウが表示されます。

↓

モーダルで登録されている住所リストを確認し、右端の「選択」をクリックすると、先ほどのラジオボタン群の下に送付先入力フォームが表示されそれぞれのinputタグにはモーダルに表示されている情報が入力されます。

↓

モーダルの「選択」を押すとモーダルが消え、赤枠内で囲ったフォーム内に情報が入力済みというイメージ

このような値の受け渡しはjqueryのみの処理で実現可能なのでしょうか？

教えていただけると幸いです。

このフォームを構成しているhtmlは下記の通りです。

HTML
1<div class="info addr_info">
2	<h2>お届け先の入力</h2>
3	<ul  class="addr_choice radio_list">
4		<li>
5			<label id="optionLbl01">
6				<input type="radio" name="receiver_user_type" id="receiver_user_type_X" value="X" onclick="copydata()" checked>
7				<span class="radioLabel">注文者の住所にお届けする</span>
8			</label>
9		</li>
10		<li>
11			<label id="optionLbl01">
12				<input type="radio" name="receiver_user_type" id="receiver_user_type_E" value="E" onclick="javscript:copydata();showReceiverForm();">
13				<span class="radioLabel">注文者の情報を元にお届け先を編集する</span>
14			</label>
15		</li>
16		<li>
17			<label id="optionLbl01">
18				<input type="radio" name="receiver_user_type" id="receiver_user_type_A" value="A" onclick="addrclick()">
19				<span class="radioLabel">お届け先リストから選択する</span>
20			</label>
21		</li>
22		<li>
23			<label id="optionLbl01">
24				<input type="radio" name="receiver_user_type" id="receiver_user_type_N" value="N" onclick="addrclick()">
25				<span class="radioLabel">新しいお届け先を入力する</span>
26			</label>
27		</li>
28	</ul>
29</div>
30<!-- 「お届け先リスト」モーダル -->
31<div class="modal js_modal">
32	<div class="modal_bg js_modal_close"></div>
33	<div class="modal_wrap">
34		<!-- モーダルの要素記入 -->
35		<p class="modal_title">挿入したい住所の選択ボタンを押してください。</p>
36		<div class="modal_content">
37			<div class="receiver_info_list">
38				<div class="receiver_info_title_box">
39					<div class="col01 receiver_info_title pcItem">受取人名</div>
40					<div class="col02 receiver_info_title pcItem">電話番号</div>
41					<div class="col03 receiver_info_title pcItem">郵便番号</div>
42					<div class="col04 receiver_info_title pcItem">都道府県</div>
43					<div class="col05 receiver_info_title pcItem">それ以降の住所</div>
44					<div class="col06 receiver_info_title">全<span class="registerd_info_count">2</span>件</div>
45				</div>
46				<div class="receiver_info_detail_box clearfix">
47					<div class="col01 receiver_info_detail">鈴木一郎</div>
48					<div class="col02 receiver_info_detail">080-111-1222</div>
49					<div class="col03 receiver_info_detail">111-0111</div>
50					<div class="col04 receiver_info_detail">東京都</div>
51					<div class="col05 receiver_info_detail">世田谷区砧1-1-1 宮迫マンション101</div>
52					<div class="col06 receiver_info_detail"><button>選択</button></div>
53				</div>
54				<div class="receiver_info_detail_box clearfix">
55					<div class="col01 receiver_info_detail">鈴木一郎</div>
56					<div class="col02 receiver_info_detail">080-111-1222</div>
57					<div class="col03 receiver_info_detail">111-0111</div>
58					<div class="col04 receiver_info_detail">東京都</div>
59					<div class="col05 receiver_info_detail">世田谷区砧1-1-1 宮迫マンション101</div>
60					<div class="col06 receiver_info_detail"><button>選択</button></div>
61				</div>
62			</div>
63		</div>
64	</div>
65</div>
66<!-- モーダルここまで -->
67<!-- ↓選択されたラジオボタンにより表示/非表示↓ -->
68<div class="info order_info receiver_address">
69	<ul class="orderinfo_lists">
70		<li class="oi_list">
71			<div class="li_title">
72				<span class="spItem_inline">※</span><label for="receiver_name"> お名前　<span class="pcItem_inline">※</span></label>
73			</div>
74			<div class="li_input">
75				<input type="text" id="receiver_name" name="receiver">
76			</div>
77		</li>
78		<li class="oi_list">
79			<div class="li_title">
80				<span class="spItem_inline">※</span><label for="receiver_kana"> お名前フリガナ　<span class="pcItem_inline">※</span></label>
81			</div>
82			<div class="li_input">
83				<input type="text" id="receiver_kana" name="receiver_kana">
84			</div>
85		</li>
86		<li class="oi_list">
87			<div class="li_title">
88				<label for="receiver_office_name">会社名　　</label>
89			</div>
90			<div class="li_input">
91				<input type="text" id="receiver_office_name" name="receiver_office_name">
92			</div>
93		</li>
94		<li class="oi_list">
95			<div class="li_title">
96				<label for="receiver_office_name_kana">会社名フリガナ　　</label>
97			</div>
98			<div class="li_input">
99				<input type="text" id="receiver_office_name_kana" name="receiver_office_name_kana">
100			</div>
101		</li>
102		<li class="oi_list">
103			<div class="li_title">
104				<label for="receiver_office_dept_name" >部署名　　</label>
105			</div>
106			<div class="li_input">
107				<input type="text" id="receiver_office_dept_name" name="receiver_office_dept_name">
108			</div>
109		</li>
110		<li class="oi_list">
111			<div class="li_title">
112				<span class="spItem_inline">※</span><label for="receiver_tel"> 電話番号　<span class="pcItem_inline">※</span></label>
113			</div>
114			<div class="li_input">
115				<input type="tel" class="hankaku efo_real_check" name="emergency2_1" id="receiver_tel1_1 receiver_tel" size="3" maxlength="5" pattern="[0-9]*">- 
116				<input type="tel" class="hankaku efo_real_check" name="emergency2_2" id="receiver_tel1_2" size="4" maxlength="5" pattern="[0-9]*">- 
117				<input type="tel" class="hankaku efo_real_check" name="emergency2_3" id="receiver_tel1_3" size="4" maxlength="5" pattern="[0-9]*">
118			</div>
119		</li>
120		<li class="oi_list">
121			<div class="li_title">
122				<span class="spItem_inline">※</span><label for="receiver_email"> メールアドレス　<span class="pcItem_inline">※</span></label>
123			</div>
124			<div class="li_input">
125				<input type="email" id="receiver_email" name="receiver_email">
126				<br>
127				<p>※メールアドレスをお間違えのないよう、正確にご入力ください。</p>
128			</div>
129		</li>
130		<li class="oi_list">
131			<div class="li_title">
132				<span class="spItem_inline">※</span><label for="receiver_post_number"> 郵便番号　<span class="pcItem_inline">※</span></label>
133			</div>
134			<div class="li_input">
135				<input type="tel" name="post1" id="receiver_post1 receiver_post_number" size="3" maxlength="3" class="hankaku efo_real_check watch" pattern="[0-9]*">- 
136				<input type="tel" name="post2" id="receiver_post2" size="4" maxlength="4" class="hankaku efo_real_check watch" pattern="[0-9]*">
137				<input type="button" name="receiver_address_input_button" value="住所入力">
138				<p>
139					住所から郵便番号を検索する場合は<a href="http://www.post.japanpost.jp/zipcode/" target="_blink">こちら</a><br>国外の方は000-0000と入力してください。
140				</p>
141			</div>
142		</li>
143		<li class="oi_list">
144			<div class="li_title">
145				<span class="spItem_inline">※</span><label for="receiver_area"> 都道府県　<span class="pcItem_inline">※</span></label>
146			</div>
147			<div class="li_input">
148				<select name="area" id="receiver_area" class="efo_real_check watch">
149					<option value="0">選択してください </option>
150					※文字数制限のため都道府県の選択肢は削除しています
151				</select>
152			</div>
153		</li>
154		<li class="oi_list">
155			<div class="li_title">
156				<span class="spItem_inline">※</span><label for="receiver_addr"> 市区町村　<span class="pcItem_inline">※</span></label>
157			</div>
158			<div class="li_input">
159				<input name="address" id="receiver_addr" type="text" class="inputLarge efo_real_check watch" size="60" maxlength="200">
160			</div>
161		</li>
162		<li class="oi_list">
163			<div class="li_title">
164				<span class="spItem_inline">※</span><label for="receiver_addr2"> それ以降の住所　<span class="pcItem_inline">※</span></label>
165			</div>
166			<div class="li_input">
167				<input name="address2" id="receiver_addr2" type="text" class="inputLarge efo_real_check watch" size="60" maxlength="120">
168				<p class="note">※マンション・アパート名は必ず入力してください。<br>※入力されている住所が勤務先の場合は「会社名・部署名」なども入力してください。</p>
169			</div>
170		</li>
171	</ul>
172</div>

azuapricot

2020/02/07 00:36

今divにベタ書きで書かれていますが、 data属性としてタグ内部に持たせたり、hiddenで別途情報を用意しておくとJSで取得しやすいと思います。イメージとしては 1.選択ボタン押下時に起動する処理を追加 2. その中で選択ボタンと同行にあるデータを取得 3. 取得したデータを該当する元入力フォームのval()にセットしてあげるこんな感じかなと思います

azuapricot

2020/02/07 01:13

miyabi_pudding

2020/02/07 04:04

送付先は、取得できており、モーダルの表示までは実装できている、ということでよろしいですか？

GenkiSugiyama

2020/02/07 06:13

@miyabi_takatsuk モーダルに表示されている送付先リストはHTML直書きのものになります。デザイナーから上がってきたデザインをマークアップのみで実装している段階で現状データの取得等は行っていません。

miyabi_pudding

2020/02/07 09:42 編集

わかりました。 > 送付先を選択できるような処理を実装予定です。ということは、その機能は実装見込みがあり、本質問は、「formのinputに、選択した住所の値が入るようにしたい」という部分だけの回答でよろしいということですね？

GenkiSugiyama

2020/02/07 09:41

@miyabi_takatsuk ご認識の通りです。「選択したモーダル上の送付先をformのinputに入れたい」というのが今回の解決したい課題になります。

行動規範の内容に同意します

回答1件

ベストアンサー

このような値の受け渡しはjqueryのみの処理で実現可能なのでしょうか？

十分可能です。

まず、ご了承いただきたいのが、JSコードの記載がないので、
こういう考え、データの用意の仕方など、ヒントの回答とさせていただきます。
（コード付きだと、回答者が開発することになってしまう）

下記手順でいかがでしょうか。

JSにて、全住所を取得する

APIを使って取得するのだと思いますが、JS上で、データとして保持しておくのが、後々のデータ処理にかなり有効になります。
その際、配列で取得できるようにするといいでしょう。

JS上のデータを元に、モーダルウィンドウ側に、JSで、表示を作る

今ベタで入っている要素を、JSによって動的に生成します。
また、その際に、各レコード（この場合は住所単体を指す）の要素には共通クラスを付与し、その中の、"選択ボタン"には、クリックイベントを追加します。

ボタンクリックした時のイベントの中身の処理は、何番目のレコードをクリックしたかを取得する

ここが重要になります。
jQueryでは便利なメソッドがあり、その要素が同じセレクタの中で何番目かを取得することができます。
クリックイベントの中で、const index = $('ボタンを示すセレクタ').index(this);とすると、取得できます。

先ほど取得した番号を使い、配列データの、レコードと符合するものを取得

先ほどのindex変数をうまく使い、これで、JS上のデータの中で、今選択を押したレコードと符合するデータの取得に成功しました。

そのデータを使い、各input要素に入れる

以上です。
ソースコードは、ご自身でがんばって書いていきましょう。
もし、細かい部分でつまづいたら、別途質問立てられるといいかと思います。

投稿2020/02/07 10:03

miyabi_pudding

総合スコア9528

GenkiSugiyama

2020/02/07 11:27

@miyabi_takatsuk 質問への確認からご回答までありがとうございます！一点教えていただきたいのですが、ベタ書きの要素を取得してくることはやはり難しいのでしょうか、、？というのも今回自分が担当する範囲がフロント周りのみのため、サーバーサイドの繋ぎこみなどがわからない状態です。。。なので自分としては、取得してきた前提でモーダルに送付先をベタで表示、そこからjsを使ってなんとかするとうイメージでいたのですが難しいでしょうか？

miyabi_pudding

2020/02/07 17:00

なるほど。カスタムデータ属性を上手く使うといいと思います。もしくは、各情報をspanでくくり、クラスをつけ、各レコードの中の該当の情報のspanのテキストノードを取得、とすればいけるかと。ですが、サーバーサイドの繋ぎ込み前提で作った方がいいと思いますけどね。その繋ぎ込みのデータなどを仮に変数として固定でもっておいて、繋ぎ込みができた段階で動的に直すとか、ですかね。

GenkiSugiyama

2020/02/14 01:24

ご回答後もこちらの質問に対応いただきありがとうございます！取り急ぎカスタムデータ属性を使って渡すことができました。ですが、今後はjsでのAPIのデータ参照方法などを勉強し、初めにご回答いただいた繋ぎこみ前提の方法で実装できるよう組み立てていきたいと思います。

行動規範の内容に同意します