teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問じょCakephp3 form追加ボタン（複製）をしてデータをDBに格納する。

編集履歴

質問編集履歴

3

削除・項目の追加はできるようになりました。残るDBへの保存方法（name）を.0.で変える方法が。。。

2019/04/12 05:35

投稿

michael_
michael_

スコア13

test CHANGED
@@ -1 +1 @@
1
- Cakephp3 form追加ボタン（複製）をしてデータをDBに格納する。
1
+ じょCakephp3 form追加ボタン（複製）をしてデータをDBに格納する。
test CHANGED
@@ -4,7 +4,11 @@
4
4
 
5
5
  フォーム内で、下記のように記述しています。
6
6
 
7
+
8
+
9
+ 最終的に、フォームをDBへ保存する方法がわからず。初歩的な内容で恐縮なのですが、
10
+
7
- 04/12修正
11
+ 検索方法がわからずご教授いただければ幸いです。
8
12
 
9
13
 
10
14
 
@@ -12,9 +16,9 @@
12
16
 
13
17
  ```コード部分
14
18
 
15
- <h2>アンケートフォームサンプル</h2>
19
+ <h2>サンプルアンケート</h2>
16
20
 
17
- <table id="sampleid">
21
+ <table id="tesuid">
18
22
 
19
23
  <tbody>
20
24
 
@@ -26,31 +30,41 @@
26
30
 
27
31
  <div class="input_wrap">
28
32
 
29
- <?= $this->Form->text('payment_day',['id' => 'date4_1', 'class' => 'inputdate', 'readonly' => "readonly"]); ?>
33
+ <?= $this->Form->text('sample１',['id' => 'date4_1', 'class' => 'inputdate', 'readonly' => "readonly"]); ?>
30
34
 
31
35
  </div>
32
36
 
33
37
  </td>
34
38
 
35
- <th class="form_ttl">項目２</th>
39
+ <th class="form_ttl">項目2</th>
36
40
 
37
41
  <td class="required_none">
38
42
 
39
43
  <div class="input_wrap">
40
44
 
41
- <?= $this->Form->text('amount_of_money',['label' => false], ['required' => true]); ?>
45
+ <?= $this->Form->text('sample2',['label' => false], ['required' => true]); ?>
42
46
 
43
47
  </div>
44
48
 
45
49
  </td>
46
50
 
47
- <th class="form_ttl">項目３</th>
51
+ <th class="form_ttl">項目3</th>
48
52
 
49
53
  <td class="required_none">
50
54
 
51
55
  <div class="input_wrap">
52
56
 
53
- <?= $this->Form->text('balance', ['label' => false], ['required' => true]); ?>
57
+ <?= $this->Form->text('sample１3', ['label' => false], ['required' => true]); ?>
58
+
59
+ </div>
60
+
61
+ </td>
62
+
63
+ <td class="required_none">
64
+
65
+ <div class="input_wrap">
66
+
67
+ <?= $this->Form->button('削除', ['class'=>'btnDelete', 'name' => 'confirm','type' => 'button','value' => 1]) ?>
54
68
 
55
69
  </div>
56
70
 
@@ -68,11 +82,13 @@
68
82
 
69
83
  <div class="btnarea_center">
70
84
 
71
- <?= $this->Form->button('登録する', ['class'=>'btn_', 'name' => 'confirm','type' => 'submit','value' => 1]) ?>
85
+ <?= $this->Form->button('登録', ['class'=>'btn_', 'name' => 'confirm','type' => 'submit','value' => 1]) ?>
72
86
 
73
87
  </div>
74
88
 
75
89
  </article>
90
+
91
+
76
92
 
77
93
  ```
78
94
 
@@ -90,21 +106,21 @@
90
106
 
91
107
  $("#btnAdd").on("click", function() {
92
108
 
93
- $("#sampleid tbody tr:last-child").clone(true).appendTo("#sampleid tbody");
109
+ $("#tesuid tbody tr:last-child").clone(true).appendTo("#tesuid tbody");
94
110
 
95
- $("#sampleid tbody tr:last-child input").val("");
111
+ $("#tesuid tbody tr:last-child input").val("");
96
112
 
97
113
  // idに付与するための行番号を取得
98
114
 
99
- row = parseInt($("#sampleid tbody tr:last-child").attr("data-row"))+1;
115
+ row = parseInt($("#tesuid tbody tr:last-child").attr("data-row"))+1;
100
116
 
101
117
  // 行番号を更新
102
118
 
103
- $("#sampleid tbody tr:last-child").attr("data-row", row);
119
+ $("#tesuid tbody tr:last-child").attr("data-row", row);
104
120
 
105
121
  // カレンダーフォームにidを設定
106
122
 
107
- $("#sampleid tbody tr:last-child input.inputdate").attr("id", "date4_"+row);
123
+ $("#tesuid tbody tr:last-child input.inputdate").attr("id", "date4_"+row);
108
124
 
109
125
  // カレンダーイベントの再設定
110
126
 
@@ -114,11 +130,23 @@
114
130
 
115
131
  });
116
132
 
133
+ // 行削除
134
+
135
+ $(".btnDelete").on("click", function() {
136
+
137
+ $(this).parents("tr").remove(); });
138
+
139
+
140
+
117
141
  });
118
142
 
119
143
  $(".inputdate").datepicker();
120
144
 
121
145
  });
146
+
147
+
148
+
149
+ <?= $this->Html->scriptEnd() ?>
122
150
 
123
151
 
124
152
 
@@ -128,12 +156,4 @@
128
156
 
129
157
  ### 現在の画面を元にやりたいこと
130
158
 
131
- ![イメージ説明](cbfebf0f348e475a0696be87633a1b7e.png)
132
-
133
-
134
-
135
- データベースへの格納の仕方と、追加要素だけに削除を追加する方法がわからず困っております。
159
+ 現在、無事に削除や、項目の追加は完了できたのですが、最終的に複製したデータをデータベースへ格納する方法がわからず、ご教授いただけますと幸いです。
136
-
137
-
138
-
139
- ご教授いただけますと幸いです。

2

画像にて不明点を追加

2019/04/12 05:35

投稿

michael_
michael_

スコア13

test CHANGED
File without changes
test CHANGED
@@ -126,6 +126,12 @@
126
126
 
127
127
 
128
128
 
129
+ ### 現在の画面を元にやりたいこと
130
+
131
+ ![イメージ説明](cbfebf0f348e475a0696be87633a1b7e.png)
132
+
133
+
134
+
129
135
  データベースへの格納の仕方と、追加要素だけに削除を追加する方法がわからず困っております。
130
136
 
131
137
 

1

複製方法は実装できましたが、DBへの格納、削除機能の細かい部分がわからず。。。

2019/04/12 02:08

投稿

michael_
michael_

スコア13

test CHANGED
File without changes
test CHANGED
@@ -4,53 +4,53 @@
4
4
 
5
5
  フォーム内で、下記のように記述しています。
6
6
 
7
+ 04/12修正
7
8
 
8
9
 
9
10
 
10
11
 
11
12
 
13
+ ```コード部分
12
14
 
13
- ```add.ctp
15
+ <h2>アンケートフォームサンプル</h2>
14
16
 
15
- <h2>アンケート項目</h2>
17
+ <table id="sampleid">
16
-
17
- <table>
18
18
 
19
19
  <tbody>
20
20
 
21
- <tr>
21
+ <tr data-row="1">
22
22
 
23
- <th class="form_ttl">アンケート内容１</th>
23
+ <th class="form_ttl">項目1</th>
24
24
 
25
25
  <td class="required_none">
26
26
 
27
27
  <div class="input_wrap">
28
28
 
29
- <?= $this->Form->text('Anke-to1',['class' => 'inputdate', 'readonly' => "readonly"]); ?>
29
+ <?= $this->Form->text('payment_day',['id' => 'date4_1', 'class' => 'inputdate', 'readonly' => "readonly"]); ?>
30
30
 
31
31
  </div>
32
32
 
33
33
  </td>
34
34
 
35
- <th class="form_ttl">アンケート内容２</th>
35
+ <th class="form_ttl">項目２</th>
36
36
 
37
37
  <td class="required_none">
38
38
 
39
39
  <div class="input_wrap">
40
40
 
41
- <?= $this->Form->text('Anke-to2',['label' => false], ['required' => true]); ?>
41
+ <?= $this->Form->text('amount_of_money',['label' => false], ['required' => true]); ?>
42
42
 
43
43
  </div>
44
44
 
45
45
  </td>
46
46
 
47
- <th class="form_ttl">アンケート内容３</th>
47
+ <th class="form_ttl">項目３</th>
48
48
 
49
49
  <td class="required_none">
50
50
 
51
51
  <div class="input_wrap">
52
52
 
53
- <?= $this->Form->text('Anke-to3', ['label' => false], ['required' => true]); ?>
53
+ <?= $this->Form->text('balance', ['label' => false], ['required' => true]); ?>
54
54
 
55
55
  </div>
56
56
 
@@ -62,19 +62,71 @@
62
62
 
63
63
  </table>
64
64
 
65
+ <input type="button" value="追加" id="btnAdd">
66
+
67
+ <article>
68
+
69
+ <div class="btnarea_center">
70
+
71
+ <?= $this->Form->button('登録する', ['class'=>'btn_', 'name' => 'confirm','type' => 'submit','value' => 1]) ?>
72
+
73
+ </div>
74
+
75
+ </article>
76
+
65
77
  ```
66
78
 
67
79
 
68
80
 
69
- これを、下記のように複製できるようにしたいと思っているのですが、
70
81
 
82
+
83
+ ```jQuery
84
+
71
- ![イメージ説明](a69fd73576eaee99a4f62965af8f32ba.png)
85
+ <?= $this->Html->scriptStart(['block' => true]) ?>
72
86
 
73
87
 
74
88
 
75
- データベースへの格納の仕方と、複製をした際に、上記記述（アンケート内容１）をinputdateにしており、カレンダー表示されるのですが、
89
+ jQuery(function($) {
76
90
 
91
+ $("#btnAdd").on("click", function() {
92
+
93
+ $("#sampleid tbody tr:last-child").clone(true).appendTo("#sampleid tbody");
94
+
95
+ $("#sampleid tbody tr:last-child input").val("");
96
+
97
+ // idに付与するための行番号を取得
98
+
99
+ row = parseInt($("#sampleid tbody tr:last-child").attr("data-row"))+1;
100
+
101
+ // 行番号を更新
102
+
103
+ $("#sampleid tbody tr:last-child").attr("data-row", row);
104
+
105
+ // カレンダーフォームにidを設定
106
+
107
+ $("#sampleid tbody tr:last-child input.inputdate").attr("id", "date4_"+row);
108
+
109
+ // カレンダーイベントの再設定
110
+
111
+ $("#date4_"+row).removeClass("hasDatepicker").off("focusin").on("focusin", function(e) {
112
+
113
+ $(this).datepicker();
114
+
115
+ });
116
+
117
+ });
118
+
119
+ $(".inputdate").datepicker();
120
+
121
+ });
122
+
123
+
124
+
125
+ ```
126
+
127
+
128
+
77
- 私の方ではjQueryがカレンダーの部分が機能しなくなるなどうまくできておりません。
129
+ データベースへの格納の仕方と、追加要素だけに削除を追加する方法がわからず困っております。
78
130
 
79
131
 
80
132