質問編集履歴

6

訂正

2018/03/06 00:05

投稿

MeB
MeB

スコア104

test CHANGED
File without changes
test CHANGED
@@ -174,44 +174,42 @@
174
174
 
175
175
  });
176
176
 
177
+
178
+
179
+  // htmlの.form-areaの表示切り替え部分
180
+
181
+  $('button').on('click',function(){
182
+
183
+ switch($(this).text()){
184
+
185
+ case "確認画面":
186
+
187
+ case "もどる":
188
+
189
+ $('.form-area:eq(0),.form-area:eq(1)').toggleClass("active");
190
+
191
+ break;
192
+
193
+ case "送信":
194
+
195
+ $('.form-area:eq(1),.form-area:eq(2)').toggleClass("active");
196
+
197
+ break;
198
+
199
+ case "フォーム入力に戻る":
200
+
201
+ $('.form-area:eq(0),.form-area:eq(2)').toggleClass("active");
202
+
203
+ break;
204
+
205
+ }
206
+
207
+ });
208
+
209
+
210
+
177
211
  });
178
212
 
179
-
180
-
181
- // htmlの.form-areaの表示切り替え部分
182
-
183
- $(function(){
184
-
185
- $('button').on('click',function(){
186
-
187
- switch($(this).text()){
188
-
189
- case "確認画面":
190
-
191
- case "もどる":
192
-
193
- $('.form-area:eq(0),.form-area:eq(1)').toggleClass("active");
194
-
195
- break;
196
-
197
- case "送信":
198
-
199
- $('.form-area:eq(1),.form-area:eq(2)').toggleClass("active");
200
-
201
- break;
202
-
203
- case "フォーム入力に戻る":
204
-
205
- $('.form-area:eq(0),.form-area:eq(2)').toggleClass("active");
206
-
207
- break;
208
-
209
- }
210
-
211
- });
212
-
213
- });
214
-
215
213
  ```
216
214
 
217
215
  ```css

5

訂正

2018/03/06 00:05

投稿

MeB
MeB

スコア104

test CHANGED
File without changes
test CHANGED
@@ -522,4 +522,10 @@
522
522
 
523
523
 
524
524
 
525
+ idやclass、js処理などは追加しても問題ありません。
526
+
527
+ 動作にマイナスの影響のあるidなどは削除でも問題ありません。
528
+
529
+
530
+
525
531
  ご教示お願いします。

4

訂正

2018/03/05 10:43

投稿

MeB
MeB

スコア104

test CHANGED
File without changes
test CHANGED
@@ -214,6 +214,276 @@
214
214
 
215
215
  ```
216
216
 
217
+ ```css
218
+
219
+ .form {
220
+
221
+ border-top: solid 3px #b5b5b5;
222
+
223
+ margin-top: 63px;
224
+
225
+ }
226
+
227
+ .form .form-area {
228
+
229
+ background: #fff;
230
+
231
+ /* border: solid 1px #767676; */
232
+
233
+ border-top: solid 3px #b5b5b5;
234
+
235
+ margin-top: 60px;
236
+
237
+ display:none
238
+
239
+ }
240
+
241
+ .form .active{
242
+
243
+ display: block;
244
+
245
+ }
246
+
247
+
248
+
249
+ .form .form-area .blue-title {
250
+
251
+ margin-top: 40px;
252
+
253
+ }
254
+
255
+ .form .form-area h3 {
256
+
257
+ padding: 0 0 18px;
258
+
259
+ }
260
+
261
+ .form p {
262
+
263
+ margin-top: 19px;
264
+
265
+ }
266
+
267
+ .form-area .supplement {
268
+
269
+ font-size: 18px;
270
+
271
+ text-align: center;
272
+
273
+ line-height: 30px;
274
+
275
+ margin-top: 0;
276
+
277
+ margin-bottom: 50px;
278
+
279
+ }
280
+
281
+ .form-area .supplement span{
282
+
283
+ font-size: 14px;
284
+
285
+ }
286
+
287
+ .form form {
288
+
289
+ padding: 0 65px;
290
+
291
+ }
292
+
293
+ .form form p {
294
+
295
+ font-size: 24px;
296
+
297
+ color: #005eae;
298
+
299
+ font-weight: bold;
300
+
301
+ margin-top: 25px;
302
+
303
+ }
304
+
305
+ .form button span {
306
+
307
+ display: none;
308
+
309
+ }
310
+
311
+ .form form p span {
312
+
313
+ font-size: 16px;
314
+
315
+ color: #ff0000;
316
+
317
+ }
318
+
319
+ .form .submit-box {
320
+
321
+ justify-content: center;
322
+
323
+ text-align: center;
324
+
325
+ }
326
+
327
+ .form .submit-box img {
328
+
329
+ width: 60%;
330
+
331
+ height: 60%;
332
+
333
+ margin-top: 40px;
334
+
335
+ }
336
+
337
+ .form .submit-end {
338
+
339
+ text-align: center;
340
+
341
+ }
342
+
343
+ .form .submit-end img {
344
+
345
+ width: 60%;
346
+
347
+ height: 60%;
348
+
349
+ }
350
+
351
+ .form input[type="text"],
352
+
353
+ .form input[type="tel"],
354
+
355
+ .form input[type="email"],
356
+
357
+ .form select,
358
+
359
+ .form textarea {
360
+
361
+ outline: none;
362
+
363
+ border: none;
364
+
365
+ font-size: 16px;
366
+
367
+ width: 100%;
368
+
369
+ height: 38px;
370
+
371
+ margin: 8px 0 0;
372
+
373
+ border: solid 1px #767676;
374
+
375
+ }
376
+
377
+ .form .form_select select {
378
+
379
+ background-color: #fff;
380
+
381
+ outline: none;
382
+
383
+ -webkit-appearance: none;
384
+
385
+ -moz-appearance: none;
386
+
387
+ appearance: none;
388
+
389
+ border: none;
390
+
391
+ border-radius: 0;
392
+
393
+ padding-left: 47%;
394
+
395
+ font-size: 16px;
396
+
397
+ border: solid 1px #7d7d7d;
398
+
399
+ }
400
+
401
+ .form .form_select {
402
+
403
+ position: relative;
404
+
405
+ }
406
+
407
+ .form .form_select:before {
408
+
409
+ z-index: 1;
410
+
411
+ position: absolute;
412
+
413
+ left: 12px;
414
+
415
+ top: 18px;
416
+
417
+ content: "";
418
+
419
+ width: 0;
420
+
421
+ height: 0;
422
+
423
+ border-style: solid;
424
+
425
+ border-width: 17px 10px 0 10px;
426
+
427
+ border-color: #5e5e5e transparent transparent transparent;
428
+
429
+ line-height: 43px;
430
+
431
+ color: #737373;
432
+
433
+ pointer-events: none;
434
+
435
+ }
436
+
437
+ .form textarea {
438
+
439
+ height: 200px;
440
+
441
+ }
442
+
443
+ .form .submit {
444
+
445
+ text-align: center;
446
+
447
+ margin-top: 70px;
448
+
449
+ padding-bottom: 48px;
450
+
451
+ }
452
+
453
+ .form-area form p:nth-child(even) {
454
+
455
+ color: #000;
456
+
457
+ font-size: 18px;
458
+
459
+ font-weight: 300;
460
+
461
+ padding-bottom: 5px;
462
+
463
+ line-height: 30px;
464
+
465
+ border-bottom: solid 1px #333;
466
+
467
+ }
468
+
469
+ .form-area .submit-box {
470
+
471
+ display: flex;
472
+
473
+ }
474
+
475
+ .form button {
476
+
477
+ padding: 0;
478
+
479
+ border: none;
480
+
481
+ background: transparent;
482
+
483
+ }
484
+
485
+ ```
486
+
217
487
 
218
488
 
219
489
  フォームの知識ほぼ0から様々の方の意見を元に作っていますが、

3

訂正

2018/03/05 10:35

投稿

MeB
MeB

スコア104

test CHANGED
File without changes
test CHANGED
@@ -220,4 +220,36 @@
220
220
 
221
221
  ここからどこのなおせばいいのかわからず詰まっております。
222
222
 
223
+
224
+
225
+
226
+
227
+ 質問
228
+
229
+ jsの「切り替えなしでformの内容を送りたい部分」の記述はあっておりますでしょうか?
230
+
231
+ またあっているの仮定して
232
+
233
+ html(正確にはindex.phpですが)内に
234
+
235
+ $person_name=filter_input(INPUT_POST,"person_name");
236
+
237
+ echo $person_name;
238
+
239
+ でよろしいのでしょうか?
240
+
241
+
242
+
243
+ 現在.form-areaの表示切り替えはできていますが、
244
+
245
+ エリア2に切り替えた際に値が飛んできていない状態です。
246
+
247
+ エリア1の確認画面というボタンを押すとjsの
248
+
249
+ console.log(data);
250
+
251
+ 部分がブラウザのコンソールに表示されます。(html全文)
252
+
253
+
254
+
223
255
  ご教示お願いします。

2

訂正

2018/03/05 10:08

投稿

MeB
MeB

スコア104

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  やりたいことは
2
2
 
3
- https://mining.gmo.jp/
3
+ [https://mining.gmo.jp/](https://mining.gmo.jp/)
4
4
 
5
5
  ここのサイトの下にあるフォームがドンピシャでした。
6
6
 

1

訂正

2018/03/05 09:47

投稿

MeB
MeB

スコア104

test CHANGED
File without changes
test CHANGED
@@ -217,3 +217,7 @@
217
217
 
218
218
 
219
219
  フォームの知識ほぼ0から様々の方の意見を元に作っていますが、
220
+
221
+ ここからどこのなおせばいいのかわからず詰まっております。
222
+
223
+ ご教示お願いします。