質問編集履歴

4

修正

2018/08/30 04:40

投稿

moppu
moppu

スコア9

test CHANGED
File without changes
test CHANGED
@@ -347,3 +347,157 @@
347
347
 
348
348
 
349
349
  ```
350
+
351
+
352
+
353
+ ###追記(20180830) 解決したソース
354
+
355
+ ```html
356
+
357
+ <form class="form-control" action="./score" method="post">
358
+
359
+ <div>
360
+
361
+ <span>登録種別</span>
362
+
363
+ <label><input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />ユーザー</label>
364
+
365
+ <label><input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />チーム</label>
366
+
367
+ </div>
368
+
369
+
370
+
371
+ <div id="entry_as_user" class="form_contents">
372
+
373
+ <label>ユーザ名:
374
+
375
+ <input type="text" class="form-control" placeholder="ユーザー名"/>
376
+
377
+ </label>
378
+
379
+ <label>チーム名:
380
+
381
+ <select class="custom-select">
382
+
383
+ <option selected>チーム選択</option>
384
+
385
+ <option value="1">A-team</option>
386
+
387
+ <option value="2">B-team</option>
388
+
389
+ <option value="3">C-team</option>
390
+
391
+ <option value="4">D-team</option>
392
+
393
+ <option value="5">E-team</option>
394
+
395
+ </select>
396
+
397
+ </label>
398
+
399
+ <button type="submit">SUBMIT_A</button>
400
+
401
+ </div>
402
+
403
+
404
+
405
+ <div id="entry_as_team" class="form_contents">
406
+
407
+ <label>チーム名:
408
+
409
+ <input type="text" class="form-control" placeholder="チーム名"/>
410
+
411
+ </label>
412
+
413
+ <label>ユーザ名:
414
+
415
+ <select class="custom-select">
416
+
417
+ <option selected>ユーザー選択</option>
418
+
419
+ <option value="1">User-A</option>
420
+
421
+ <option value="2">User-B</option>
422
+
423
+ <option value="3">User-C</option>
424
+
425
+ <option value="4">User-D</option>
426
+
427
+ <option value="5">User-E</option>
428
+
429
+ </select>
430
+
431
+ </label>
432
+
433
+ <button type="submit">SUBMIT_B</button>
434
+
435
+ </div>
436
+
437
+ </form>
438
+
439
+
440
+
441
+ <!--スクリプト-->
442
+
443
+ <script type="text/javascript">
444
+
445
+ function entryChange1(){
446
+
447
+ var eau = document.getElementById('entry_as_user');
448
+
449
+ var eat = document.getElementById('entry_as_team');
450
+
451
+
452
+
453
+ radio = document.getElementsByName('entryPlan')
454
+
455
+ if(radio[0].checked) {
456
+
457
+ //フォーム
458
+
459
+ eau.style.display = "";
460
+
461
+ eat.style.display = "none";
462
+
463
+ //特典
464
+
465
+ //document.getElementById('firstNotice').style.display = "";
466
+
467
+ }else if(radio[1].checked) {
468
+
469
+ //フォーム
470
+
471
+ eau.style.display = "none";
472
+
473
+ eat.style.display = "";
474
+
475
+ //特典
476
+
477
+ //document.getElementById('firstNotice').style.display = "none";
478
+
479
+ }
480
+
481
+ }
482
+
483
+
484
+
485
+ //オンロードさせ、リロード時に選択を保持
486
+
487
+ window.onload = entryChange1;
488
+
489
+ </script>
490
+
491
+ ```
492
+
493
+ ```css
494
+
495
+ .form_contents >label{
496
+
497
+ display: block;
498
+
499
+ }
500
+
501
+ ```
502
+
503
+ 以上のソースコードを用いることで当初の期待値である、ラジオボタンごとのフォームの切り替え及び登録ボタンの差し替えが可能になりました。

3

変更点を追加し、問題点を記述しました

2018/08/30 04:40

投稿

moppu
moppu

スコア9

test CHANGED
File without changes
test CHANGED
@@ -158,10 +158,192 @@
158
158
 
159
159
 
160
160
 
161
+ ### 変更後の問題点
162
+
163
+ フォームを2つずつ表示させたいのですが <tr>が一つにしかかからない為、ラジオボタンを切り替えても、フォームが3つ表示され切り替わらない。
164
+
165
+
166
+
161
- ### 試したこと
167
+ ###変更後ソース
168
+
169
+
170
+
162
-
171
+ ```html
172
+
163
-
173
+ <!--インデント整えたバージョン-->
174
+
175
+
176
+
164
-
177
+ <form class="form-control" action="./score" method="post">
178
+
179
+ <table class="layout-set" border="0" cellspacing="0" cellpadding="0">
180
+
181
+ <tr>
182
+
183
+ <th>登録種別</th>
184
+
185
+ <td>
186
+
187
+ <label>
188
+
189
+ <input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />
190
+
191
+ ユーザー
192
+
193
+ </label>
194
+
195
+ <label>
196
+
197
+ <input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />
198
+
199
+ チーム
200
+
201
+ </label>
202
+
203
+ </td>
204
+
205
+ </tr>
206
+
207
+ <!-- 表示非表示切り替え -->
208
+
209
+ <tr><!-- ←追加分-->
210
+
211
+ <tr id="firstBox">
212
+
213
+ <!--<tr> ←削除分-->
214
+
215
+ <th>ユーザー名:</th>
216
+
217
+ <td><input type="text" class="form-control" placeholder="ユーザー名"/></td>
218
+
219
+ </tr>
220
+
221
+ <tr>
222
+
223
+ <th>チーム名:</th>
224
+
225
+ <td>
226
+
227
+ <select class="custom-select">
228
+
229
+ <option selected>チーム選択</option>
230
+
231
+ <option value="1">A-team</option>
232
+
233
+ <option value="2">B-team</option>
234
+
235
+ <option value="3">C-team</option>
236
+
237
+ <option value="4">D-team</option>
238
+
239
+ <option value="5">E-team</option>
240
+
241
+ </select>
242
+
243
+ </td>
244
+
245
+ <!-- <p>紹介された方のお名前を入力してください。</p></td> -->
246
+
247
+ </tr>
248
+
249
+ </tr>
250
+
251
+ <!-- 表示非表示切り替え -->
252
+
253
+ <tr><!-- ←追加分-->
254
+
255
+ <tr id="secondBox">
256
+
257
+ <!--<tr> ←削除分-->
258
+
259
+ <th>チーム名:</th>
260
+
261
+ <td><input type="text" class="form-control" placeholder="チーム名"/></td>
262
+
263
+ </tr>
264
+
265
+ <tr>
266
+
267
+ <th>ユーザー名:</th>
268
+
269
+ <td>
270
+
271
+ <select class="custom-select">
272
+
273
+ <option selected>ユーザー選択</option>
274
+
275
+ <option value="1">User-A</option>
276
+
277
+ <option value="2">User-B</option>
278
+
279
+ <option value="3">User-C</option>
280
+
281
+ <option value="4">User-D</option>
282
+
283
+ <option value="5">User-E</option>
284
+
285
+ </select>
286
+
287
+ </td>
288
+
289
+ <!-- <p>紹介された方のお名前を入力してください。</p></td> -->
290
+
291
+ </tr>
292
+
293
+ </tr>
294
+
295
+
296
+
297
+ </table>
298
+
299
+ </form>
300
+
301
+
302
+
303
+ <!--スクリプト-->
304
+
305
+ <script type="text/javascript">
306
+
307
+ function entryChange1(){
308
+
309
+ radio = document.getElementsByName('entryPlan')
310
+
311
+ if(radio[0].checked) {
312
+
313
+ //フォーム
314
+
315
+ document.getElementById('firstBox').style.display = "";
316
+
317
+ document.getElementById('secondBox').style.display = "none";
318
+
319
+ //特典
320
+
165
- http://5am.jp/javascript/form_change_javascript/
321
+ //document.getElementById('firstNotice').style.display = "";
322
+
166
-
323
+ }else if(radio[1].checked) {
324
+
325
+ //フォーム
326
+
327
+ document.getElementById('firstBox').style.display = "none";
328
+
329
+ document.getElementById('secondBox').style.display = "";
330
+
167
- 参考にしたサイトです
331
+ //特典
332
+
333
+ //document.getElementById('firstNotice').style.display = "none";
334
+
335
+ }
336
+
337
+ }
338
+
339
+
340
+
341
+ //オンロードさせ、リロード時に選択を保持
342
+
343
+ window.onload = entryChange1;
344
+
345
+ </script>
346
+
347
+
348
+
349
+ ```

2

質問を修正しました

2018/08/29 00:35

投稿

moppu
moppu

スコア9

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,14 @@
1
- ### 前提・実現したいこと
1
+ ### 前提
2
2
 
3
- 現在cakePHP3を使い開発をしている途中です。
3
+ 現在cakePHP3を使い、簡単なwebサイト作成していす。
4
4
 
5
+
6
+
7
+ ###期待値
8
+
5
- 期待値として、チームを選択するとチーム名と登録ユーザーが選べるフォームに切り替わることです。
9
+ ユーザーチームの登録ページを作成しているのですがラジオボタンでユーザーを選択するとユーザー登録用のフォームが2つ出てきて、ラジオボタンでチームを選択するとチーム登録用のフォームが2つ出るようしたいです。
10
+
11
+
6
12
 
7
13
 
8
14
 

1

言語名を変更

2018/08/28 15:13

投稿

moppu
moppu

スコア9

test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
 
22
22
 
23
- ```js
23
+ ```html
24
24
 
25
25
  <form class="form-control" action="./score" method="post">
26
26