teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問JavaScriptを使って、フォームの記入欄を動的に追加したい

編集履歴

質問編集履歴

3

ソースコード修正

2018/07/16 14:01

投稿

sano0623
sano0623

スコア9

test CHANGED
File without changes
test CHANGED
@@ -108,27 +108,27 @@
108
108
 
109
109
  <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail]" value="" ></div>
110
110
 
111
- <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
111
+ <button class="btn btn-default mt20　remove_row" type="button">行削除</button>
112
-
112
+
113
- </div>
113
+ </div>
114
-
114
+
115
- <div class="form-inline row mt10 bar" >
115
+ <div class="form-inline row mt10 bar" >
116
-
116
+
117
- <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
117
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
118
-
118
+
119
- <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
119
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
120
-
120
+
121
- <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
121
+ <button class="btn btn-default mt20　remove_row"　type="button">行削除</button>
122
-
122
+
123
- </div>
123
+ </div>
124
-
124
+
125
- <div class="form-inline row mt10 bar" >
125
+ <div class="form-inline row mt10 bar" >
126
-
126
+
127
- <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
127
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
128
-
128
+
129
- <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
129
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
130
-
130
+
131
- <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
131
+ <button class="btn btn-default mt20　remove_row" type="button">行削除</button>
132
132
 
133
133
  </div>
134
134
 
@@ -138,7 +138,7 @@
138
138
 
139
139
  <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
140
140
 
141
- <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
141
+ <button class="btn btn-default mt20　remove_row" type="button">行削除</button>
142
142
 
143
143
  </div>
144
144
 
@@ -172,7 +172,7 @@
172
172
 
173
173
  <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail2]" value="" ></div>
174
174
 
175
- <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
175
+ <button class="btn btn-default mt20 remove_row" type="button">行削除</button>
176
176
 
177
177
  </div>
178
178
 
@@ -182,7 +182,7 @@
182
182
 
183
183
  <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail2]" value="" ></div>
184
184
 
185
- <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
185
+ <button class="btn btn-default mt20 remove_row" type="button">行削除</button>
186
186
 
187
187
  </div>
188
188
 
@@ -192,7 +192,7 @@
192
192
 
193
193
  <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][2][detail2]" value="" ></div>
194
194
 
195
- <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
195
+ <button class="btn btn-default mt20 remove_row" type="button">行削除</button>
196
196
 
197
197
  </div>
198
198
 
@@ -202,7 +202,7 @@
202
202
 
203
203
  <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][3][detail2]" value="" ></div>
204
204
 
205
- <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
205
+ <button class="btn btn-default mt20 remove_row" type="button">行削除</button>
206
206
 
207
207
  </div>
208
208
 

2

ソースコードの変更

2018/07/16 14:01

投稿

sano0623
sano0623

スコア9

test CHANGED
File without changes
test CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
  <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail2]" value="" ></div>
40
40
 
41
- <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
41
+ <button class="btn btn-default mt20 remove_row" type="button">行削除</button>
42
42
 
43
43
  </div>
44
44
 
@@ -76,7 +76,7 @@
76
76
 
77
77
  });
78
78
 
79
- $( '.foo' ).on( 'click', '#remove_row', function() {
79
+ $( '.foo' ).on( 'click', '.remove_row', function() {
80
80
 
81
81
  if($('.bar').length > 1){
82
82
 

1

ソースコードの変更

2018/07/16 13:56

投稿

sano0623
sano0623

スコア9

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ### JavaScriptを使って、フォームの記入欄を動的に追加する
1
+ ### JavaScriptを使って、フォームの記入欄を動的に追加する(少し修正)
2
2
 
3
3
 
4
4
 
@@ -34,8 +34,110 @@
34
34
 
35
35
  <div class="form-inline row mt10 bar" >
36
36
 
37
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail1]" value="" ></div>
38
+
39
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail2]" value="" ></div>
40
+
41
+ <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
42
+
43
+ </div>
44
+
45
+ </div>
46
+
47
+ <div class="row">
48
+
49
+ <div class="col-md-3 mt15">
50
+
51
+ <button class="btn btn-default" id="add_row" type="button">行追加</button>
52
+
53
+ </div>
54
+
55
+ </div>
56
+
57
+ ```
58
+
59
+
60
+
61
+ ```javascript
62
+
63
+ $(document).on("click", "#add_row", function () {
64
+
65
+ var target = $('.bar:last-child')
66
+
67
+ target.clone(true).appendTo('.foo');
68
+
69
+ $('.bar:last-child input').each(function(){
70
+
71
+ $(this).val('');
72
+
73
+ count = $('.bar').length-1;
74
+
75
+ $(this).attr('name',$(this).attr('name').replace('0',count));
76
+
77
+ });
78
+
79
+ $( '.foo' ).on( 'click', '#remove_row', function() {
80
+
81
+ if($('.bar').length > 1){
82
+
83
+ $( this ).parents( '.bar' ).remove();
84
+
85
+ }
86
+
87
+ });
88
+
89
+ });
90
+
91
+ ```
92
+
93
+
94
+
95
+ ### 試したこと
96
+
97
+
98
+
99
+ 行追加ボタンを押したコードの結果
100
+
101
+ ```html
102
+
103
+ <div class="foo">
104
+
105
+ <div class="form-inline row mt10 bar" >
106
+
37
107
  <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail]" value="" ></div>
38
108
 
109
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail]" value="" ></div>
110
+
111
+ <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
112
+
113
+ </div>
114
+
115
+ <div class="form-inline row mt10 bar" >
116
+
117
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
118
+
119
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
120
+
121
+ <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
122
+
123
+ </div>
124
+
125
+ <div class="form-inline row mt10 bar" >
126
+
127
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
128
+
129
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
130
+
131
+ <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
132
+
133
+ </div>
134
+
135
+ <div class="form-inline row mt10 bar" >
136
+
137
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
138
+
139
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
140
+
39
141
  <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
40
142
 
41
143
  </div>
@@ -56,45 +158,9 @@
56
158
 
57
159
 
58
160
 
59
- ```javascript
161
+
60
-
61
- $(document).on("click", "#add_row", function () {
162
+
62
-
63
- var target = $('.bar:last-child')
64
-
65
- target.clone(true).appendTo('.foo');
66
-
67
- $('.bar:last-child input').each(function(){
68
-
69
- $(this).val('');
70
-
71
- count = $('.bar').length-1;
72
-
73
- $(this).attr('name',$(this).attr('name').replace('0',count));
74
-
75
- });
76
-
77
- $( '.foo' ).on( 'click', '#remove_row', function() {
78
-
79
- if($('.bar').length > 1){
80
-
81
- $( this ).parents( '.bar' ).remove();
82
-
83
- }
84
-
85
- });
86
-
87
- });
88
-
89
- ```
90
-
91
-
92
-
93
- ### 試したこと
163
+ 期待する結果
94
-
95
-
96
-
97
- 行追加ボタンを押したコードの結果
98
164
 
99
165
  ```html
100
166
 
@@ -102,23 +168,29 @@
102
168
 
103
169
  <div class="form-inline row mt10 bar" >
104
170
 
105
- <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail]" value="" ></div>
171
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail1]" value="" ></div>
172
+
106
-
173
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail2]" value="" ></div>
174
+
107
- <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
175
+ <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
108
-
176
+
109
- </div>
177
+ </div>
110
-
178
+
111
- <div class="form-inline row mt10 bar" >
179
+ <div class="form-inline row mt10 bar" >
112
-
180
+
113
- <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
181
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail1]" value="" ></div>
182
+
114
-
183
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail2]" value="" ></div>
184
+
115
- <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
185
+ <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
116
-
186
+
117
- </div>
187
+ </div>
118
-
188
+
119
- <div class="form-inline row mt10 bar" >
189
+ <div class="form-inline row mt10 bar" >
120
-
190
+
121
- <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
191
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][2][detail1]" value="" ></div>
192
+
193
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][2][detail2]" value="" ></div>
122
194
 
123
195
  <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
124
196
 
@@ -126,7 +198,9 @@
126
198
 
127
199
  <div class="form-inline row mt10 bar" >
128
200
 
129
- <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
201
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][3][detail1]" value="" ></div>
202
+
203
+ <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][3][detail2]" value="" ></div>
130
204
 
131
205
  <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
132
206
 
@@ -148,62 +222,6 @@
148
222
 
149
223
 
150
224
 
151
-
152
-
153
- 期待する結果
154
-
155
- ```html
156
-
157
- <div class="foo">
158
-
159
- <div class="form-inline row mt10 bar" >
160
-
161
- <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail]" value="" ></div>
162
-
163
- <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
164
-
165
- </div>
166
-
167
- <div class="form-inline row mt10 bar" >
168
-
169
- <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
170
-
171
- <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
172
-
173
- </div>
174
-
175
- <div class="form-inline row mt10 bar" >
176
-
177
- <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][2][detail]" value="" ></div>
178
-
179
- <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
180
-
181
- </div>
182
-
183
- <div class="form-inline row mt10 bar" >
184
-
185
- <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][3][detail]" value="" ></div>
186
-
187
- <button class="btn btn-default mt20" id="remove_row1" type="button">行削除</button>
188
-
189
- </div>
190
-
191
- </div>
192
-
193
- <div class="row">
194
-
195
- <div class="col-md-3 mt15">
196
-
197
- <button class="btn btn-default" id="add_row" type="button">行追加</button>
198
-
199
- </div>
200
-
201
- </div>
202
-
203
- ```
204
-
205
-
206
-
207
225
  JavaScriptの中にある変数countを、console.logで確認してみたのですが、変数countは期待通り値が１ずつ増えていました。
208
226
 
209
227