teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問モーダルウィンドウのフォームでのPOST、元のFORMの値が消えてしまう。誰か教えてください！

編集履歴

質問編集履歴

4

JS追加しました。

2016/10/30 12:08

投稿

SUZUSUZU
SUZUSUZU

スコア12

test CHANGED
File without changes
test CHANGED
@@ -20,6 +20,10 @@
20
20
 
21
21
  ```ここに言語を入力
22
22
 
23
+
24
+
25
+ <script type="text/javascript" src="modal.js"></script>
26
+
23
27
  <table>
24
28
 
25
29
 
@@ -132,7 +136,101 @@
132
136
 
133
137
  ```
134
138
 
135
-
139
+ ```ここに言語を入力
140
+
141
+ $(function(){
142
+
143
+ // 「.modal-open」をクリック
144
+
145
+ $('.modal-open').click(function(){
146
+
147
+ // オーバーレイ用の要素を追加
148
+
149
+ $('body').append('<div class="modal-overlay"></div>');
150
+
151
+ // オーバーレイをフェードイン
152
+
153
+ $('.modal-overlay').fadeIn('slow');
154
+
155
+
156
+
157
+ // モーダルコンテンツのIDを取得
158
+
159
+ var modal = '#' + $(this).attr('data-target');
160
+
161
+ // モーダルコンテンツの表示位置を設定
162
+
163
+ modalResize();
164
+
165
+ // モーダルコンテンツフェードイン
166
+
167
+ $(modal).fadeIn('slow');
168
+
169
+
170
+
171
+ // 「.modal-overlay」あるいは「.modal-close」をクリック
172
+
173
+ $('.modal-overlay, .modal-close').off().click(function(){
174
+
175
+ // モーダルコンテンツとオーバーレイをフェードアウト
176
+
177
+ $(modal).fadeOut('slow');
178
+
179
+ $('.modal-overlay').fadeOut('slow',function(){
180
+
181
+ // オーバーレイを削除
182
+
183
+ $('.modal-overlay').remove();
184
+
185
+ });
186
+
187
+ });
188
+
189
+
190
+
191
+ // リサイズしたら表示位置を再取得
192
+
193
+ $(window).on('resize', function(){
194
+
195
+ modalResize();
196
+
197
+ });
198
+
199
+
200
+
201
+ // モーダルコンテンツの表示位置を設定する関数
202
+
203
+ function modalResize(){
204
+
205
+ // ウィンドウの横幅、高さを取得
206
+
207
+ var w = $(window).width();
208
+
209
+ var h = $(window).height();
210
+
211
+
212
+
213
+ // モーダルコンテンツの表示位置を取得
214
+
215
+ var x = (w - $(modal).outerWidth(true)) / 2;
216
+
217
+ var y = (h - $(modal).outerHeight(true)) / 2;
218
+
219
+
220
+
221
+ // モーダルコンテンツの表示位置を設定
222
+
223
+ $(modal).css({'left': x + 'px','top': y +'px'});
224
+
225
+ }
226
+
227
+
228
+
229
+ });
230
+
231
+ });
232
+
233
+ ```
136
234
 
137
235
 
138
236
 

3

POSTについてついかしました。

2016/10/30 12:08

投稿

SUZUSUZU
SUZUSUZU

スコア12

test CHANGED
File without changes
test CHANGED
@@ -139,3 +139,11 @@
139
139
  以上のようなHTMLでモーダルから値を受け取って、こだわり条件としてフォームを送りたいです。
140
140
 
141
141
  国選択項目と名前選択の項目を入力した状態を保持したままモーダルからの値を受け取りたいです。
142
+
143
+ /*POSTについて*/
144
+
145
+ モーダルからのPOSTをこのページで受け取るのか違うページで受け取るかが分かっていません
146
+
147
+ どういう形にすればよいか教えていただければありがたいです。
148
+
149
+ スイマセン...

2

簡単なコードを追加しました

2016/10/30 12:07

投稿

SUZUSUZU
SUZUSUZU

スコア12

test CHANGED
File without changes
test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  //追加記述です
20
20
 
21
-
21
+ ```ここに言語を入力
22
22
 
23
23
  <table>
24
24
 
@@ -130,6 +130,10 @@
130
130
 
131
131
  </div>/*モーダルウィンドウここまで*/
132
132
 
133
+ ```
134
+
135
+
136
+
133
137
 
134
138
 
135
139
  以上のようなHTMLでモーダルから値を受け取って、こだわり条件としてフォームを送りたいです。

1

簡単なコードを追加しました

2016/10/30 11:59

投稿

SUZUSUZU
SUZUSUZU

スコア12

test CHANGED
File without changes
test CHANGED
@@ -13,3 +13,125 @@
13
13
  AJAXなどでしょうか？
14
14
 
15
15
  教えてくださいお願いします。
16
+
17
+
18
+
19
+ //追加記述です
20
+
21
+
22
+
23
+ <table>
24
+
25
+
26
+
27
+ <tr>
28
+
29
+ <th>国を選択</th>
30
+
31
+ <td>
32
+
33
+ <input type="checkbox" name="kuni[]" value="日本">日本
34
+
35
+ <input type="checkbox" name="kuni"[] value="アメリカ">アメリカ
36
+
37
+ <input type="checkbox" name="kuni[]" value="中国">中国
38
+
39
+ /*ここで選んだ項目がモーダルで選択した後初期値になってしまう*/
40
+
41
+ </td>
42
+
43
+ </tr>
44
+
45
+
46
+
47
+ <tr>
48
+
49
+ <th>名前を入力</th>
50
+
51
+ <td>
52
+
53
+ <input type="text" name="name" >
54
+
55
+
56
+
57
+ /*ここで入力した名前がモーダルで選択した後、初期値になってしまう*/
58
+
59
+ </td>
60
+
61
+ </tr>
62
+
63
+
64
+
65
+ <tr>
66
+
67
+ <th>こだわり</th>
68
+
69
+ <td>
70
+
71
+ <a data-target="con3" class="modal-open">
72
+
73
+ <img src="IMG">
74
+
75
+ </a>
76
+
77
+ /*ここにモーダルウィンドウで選択した値を表示する、ここにモーダルからの値をセットして値をPOSTしたいです*/
78
+
79
+ </td>
80
+
81
+ </tr>
82
+
83
+
84
+
85
+ <div id="con3" class="modal-content">
86
+
87
+ <a class="modal-close">
88
+
89
+ <img src="CLOSE_IMG＿BTN">
90
+
91
+ </a>
92
+
93
+
94
+
95
+ <div class="modal_body">
96
+
97
+ <div class="modal_body1">
98
+
99
+ <form method="post" action="">
100
+
101
+ <div class="modal_check_head">
102
+
103
+ こだわり条件は複数選択していただくことができます。
104
+
105
+ </div>
106
+
107
+ <ul>
108
+
109
+ <li><label><input type="checkbox" name="M_checkbox[]" value="A">A項目</label></li>
110
+
111
+ <li><label><input type="checkbox" name="M_checkbox[]" value="B">B項目</label></li>
112
+
113
+ <li><label><input type="checkbox" name="M_checkbox[]" value="C">C項目</label></li>
114
+
115
+ </ul>
116
+
117
+ </div>
118
+
119
+ <div>
120
+
121
+ <input type="submit" name="submit" value="以上の特徴で登録">
122
+
123
+ </div>
124
+
125
+ </form>
126
+
127
+ <p><a class="modal-close">閉じる</a></p>
128
+
129
+ </div>
130
+
131
+ </div>/*モーダルウィンドウここまで*/
132
+
133
+
134
+
135
+ 以上のようなHTMLでモーダルから値を受け取って、こだわり条件としてフォームを送りたいです。
136
+
137
+ 国選択項目と名前選択の項目を入力した状態を保持したままモーダルからの値を受け取りたいです。