質問編集履歴

6

修正

2017/02/24 04:01

投稿

KENBO-CHAN
KENBO-CHAN

スコア13

test CHANGED
File without changes
test CHANGED
@@ -52,17 +52,17 @@
52
52
 
53
53
 
54
54
 
55
- 試してみこと--
55
+ 試したsubmit--
56
56
 
57
57
  ①<input type="submit" value="カートに入れる" data-remodal-target="modal1">
58
58
 
59
59
 
60
60
 
61
- ②<input type="submit" value="カートに入れる" onclick="location.href='#modal6'" data-remodal-target="modal6">
61
+ ②<input type="submit" value="カートに入れる" onclick="location.href='#modal1'" data-remodal-target="modal1">
62
-
63
-
64
-
62
+
63
+
64
+
65
- ③<a href="#modal6" onClick="document.menu.amount.value = 1;document.menu.submit();">カートに入れる</a>
65
+ ③<a href="#modal1" onClick="document.menu.amount.value = 1;document.menu.submit();">カートに入れる</a>
66
66
 
67
67
 
68
68
 
@@ -200,7 +200,7 @@
200
200
 
201
201
 
202
202
 
203
- <input type="submit" value="カートに入れる" class="buttonHover" data-remodal-target="modal1">
203
+ <input type="submit" value="カートに入れる" data-remodal-target="modal1">
204
204
 
205
205
 
206
206
 

5

文章修正

2017/02/24 04:01

投稿

KENBO-CHAN
KENBO-CHAN

スコア13

test CHANGED
File without changes
test CHANGED
@@ -1,5 +1,7 @@
1
1
  教えて!gooにも投稿させていただいたのですが、こちらでも質問させてください。
2
2
 
3
+ https://oshiete.goo.ne.jp/qa/9647851.html
4
+
3
5
 
4
6
 
5
7
  formのsubmitを押すと別サイトに飛ぶのですが、飛ばさないでモーダルで表示させたいです。
@@ -10,9 +12,7 @@
10
12
 
11
13
  知識不足すぎて回答の意味も理解できません。どうか詳細に教えてくださいませ!
12
14
 
13
-
14
-
15
- https://oshiete.goo.ne.jp/qa/9647851.html
15
+ https://teratail.com/questions/2860
16
16
 
17
17
 
18
18
 

4

教えて!gooのリンクが間違っていたので修正しました。

2017/02/24 03:47

投稿

KENBO-CHAN
KENBO-CHAN

スコア13

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
 
14
14
 
15
- https://teratail.com/questions/2860
15
+ https://oshiete.goo.ne.jp/qa/9647851.html
16
16
 
17
17
 
18
18
 

3

文章変更しました。

2017/02/24 03:01

投稿

KENBO-CHAN
KENBO-CHAN

スコア13

test CHANGED
File without changes
test CHANGED
@@ -104,6 +104,8 @@
104
104
 
105
105
  【モーダルで表示される部分】
106
106
 
107
+ ```ここに言語を入力
108
+
107
109
  <div class="remodal" data-remodal-id="modal1">
108
110
 
109
111
  <button data-remodal-action="close" class="remodal-close"></button>
@@ -118,6 +120,10 @@
118
120
 
119
121
  </div>
120
122
 
123
+ ```
124
+
125
+
126
+
121
127
 
122
128
 
123
129
 
@@ -132,6 +138,8 @@
132
138
 
133
139
  【form部分】
134
140
 
141
+ ```ここに言語を入力
142
+
135
143
  <form id="form" name="menu" action="https://******" method="post">
136
144
 
137
145
  <div id="itemSelect">
@@ -198,6 +206,8 @@
198
206
 
199
207
  </form>
200
208
 
209
+ ```
210
+
201
211
 
202
212
 
203
213
 

2

文章修正しました。

2017/02/24 02:50

投稿

KENBO-CHAN
KENBO-CHAN

スコア13

test CHANGED
File without changes
test CHANGED
@@ -102,7 +102,7 @@
102
102
 
103
103
 
104
104
 
105
-
105
+ 【モーダルで表示される部分】
106
106
 
107
107
  <div class="remodal" data-remodal-id="modal1">
108
108
 
@@ -130,7 +130,7 @@
130
130
 
131
131
 
132
132
 
133
-
133
+ 【form部分】
134
134
 
135
135
  <form id="form" name="menu" action="https://******" method="post">
136
136
 

1

ご指摘いただいた部分、追加いたしましたのでよろしくお願いいたします。

2017/02/24 02:44

投稿

KENBO-CHAN
KENBO-CHAN

スコア13

test CHANGED
File without changes
test CHANGED
@@ -17,3 +17,191 @@
17
17
 
18
18
 
19
19
  自分の知識は、html/cssのみです。よろしくお願いいたします。
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+ 下記追加---------
32
+
33
+ 申し訳ございません。
34
+
35
+ 下記、試したことやコード記述しましたので、どうかご教授お願いします。
36
+
37
+
38
+
39
+ submitするときに別ページに飛ぶのですが、それを『remodal』を使用して
40
+
41
+ モーダルで表示するにはsubmit周りを変更することで実現できると思い
42
+
43
+ 下記を試しました。
44
+
45
+
46
+
47
+ 【試したこと】
48
+
49
+ 元のsubmit--
50
+
51
+ <input type="submit" value="カートに入れる">
52
+
53
+
54
+
55
+ 試してみたこと--
56
+
57
+ ①<input type="submit" value="カートに入れる" data-remodal-target="modal1">
58
+
59
+
60
+
61
+ ②<input type="submit" value="カートに入れる" onclick="location.href='#modal6'" data-remodal-target="modal6">
62
+
63
+
64
+
65
+ ③<a href="#modal6" onClick="document.menu.amount.value = 1;document.menu.submit();">カートに入れる</a>
66
+
67
+
68
+
69
+ 結果--
70
+
71
+ ①はモーダルで表示されるのですが、postデータが反映されず失敗しました。
72
+
73
+ ②は①と同様の結果になり失敗しました。
74
+
75
+ ③も同様に失敗してしまいました。
76
+
77
+
78
+
79
+ 元のsubmitではリンク先で商品が1つ追加された状態で表示されますが、
80
+
81
+ 上記①~③の結果はモーダルでは表示されるものの商品が0の状態で表示されます。
82
+
83
+
84
+
85
+
86
+
87
+ 色々と調べた中で下記URL先が答えなのかなと思っていますが、内容を翻訳して
88
+
89
+ 読んでも理解できませんでした。。
90
+
91
+ https://github.com/VodkaBears/Remodal/issues/29
92
+
93
+
94
+
95
+ 実現したいこと--
96
+
97
+ submitで移動するリンク先をpost情報がちゃんと反映された状態でモーダルで表示したいです。
98
+
99
+
100
+
101
+
102
+
103
+
104
+
105
+
106
+
107
+ <div class="remodal" data-remodal-id="modal1">
108
+
109
+ <button data-remodal-action="close" class="remodal-close"></button>
110
+
111
+ <div class="modal1">
112
+
113
+ <iframe src="https://~" frameborder="0"></iframe>
114
+
115
+ </div>
116
+
117
+ <button data-remodal-action="close" class="underline pointer">閉じる</button>
118
+
119
+ </div>
120
+
121
+
122
+
123
+
124
+
125
+
126
+
127
+
128
+
129
+
130
+
131
+
132
+
133
+
134
+
135
+ <form id="form" name="menu" action="https://******" method="post">
136
+
137
+ <div id="itemSelect">
138
+
139
+ <div id="amountSelectWrap" class="purchaseElement">
140
+
141
+ <label for="amountSelect">数量</label>
142
+
143
+ <select name="amount" id="amountSelect" class="amountSelect">
144
+
145
+ <option value="1">1</option>
146
+
147
+ <option value="2">2</option>
148
+
149
+ <option value="3">3</option>
150
+
151
+ <option value="4">4</option>
152
+
153
+ <option value="5">5</option>
154
+
155
+ <option value="6">6</option>
156
+
157
+ <option value="7">7</option>
158
+
159
+ <option value="8">8</option>
160
+
161
+ <option value="9">9</option>
162
+
163
+ <option value="10">10</option>
164
+
165
+ </select>
166
+
167
+ </div>
168
+
169
+ </div>
170
+
171
+
172
+
173
+ <input type="hidden" name="data[via]" value="" id="via"/>お
174
+
175
+ <input type="hidden" name="shopID" value="******" />
176
+
177
+ <input type="hidden" name="id" value="******" />
178
+
179
+
180
+
181
+ <script>
182
+
183
+ $('#valiationSelect').on('change', function(){
184
+
185
+ $('#amountSelectWrap .amountSelect').addClass('hide').prop('disabled', true);
186
+
187
+ $('#amountSelectWrap .amountSelect:eq('+$(this).find(':selected').attr('data-index')+')').removeClass('hide').prop('disabled', false);
188
+
189
+ });
190
+
191
+ </script>
192
+
193
+
194
+
195
+ <input type="submit" value="カートに入れる" class="buttonHover" data-remodal-target="modal1">
196
+
197
+
198
+
199
+ </form>
200
+
201
+
202
+
203
+
204
+
205
+
206
+
207
+ 以上、よろしくお願いいたします。