質問編集履歴
3
jsを追記しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -94,4 +94,18 @@
|
|
|
94
94
|
});
|
|
95
95
|
|
|
96
96
|
</script>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### 追記
|
|
100
|
+
|
|
101
|
+
ファイル選択から選択したファイル名を表示するための実装です。
|
|
102
|
+
下記記載したところ、元々表示されている1つ目の「ファイル選択」ではうまく動作するのですが、
|
|
103
|
+
＋を押して追加した2つ目以降だとうまく動作がされない状況です。。。
|
|
104
|
+
※<input type="file" name="file[0]" class="fileinput">への変更は済です。
|
|
105
|
+
|
|
106
|
+
```js
|
|
107
|
+
$('.file .fileinput').on('change', function () {
|
|
108
|
+
var file = $(this).prop('files')[0];
|
|
109
|
+
$(this).closest('.file').find('.filename').text(file.name);
|
|
110
|
+
});
|
|
97
111
|
```
|
2
タイトルを変更しました
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
【jquery】ボタンクリックでフォームを追加
|
|
1
|
+
【jquery】ボタンクリックでフォームを追加し、採番で番号を振り分けたい
|
body
CHANGED
|
File without changes
|
1
サンプルのコードのクラス名が長く、複雑だったので、見やすいように短くしました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -20,81 +20,61 @@
|
|
|
20
20
|
### HTML
|
|
21
21
|
|
|
22
22
|
```html
|
|
23
|
-
<div class="
|
|
23
|
+
<div class="items">
|
|
24
|
-
<div class="
|
|
24
|
+
<div class="item">
|
|
25
|
-
<div class="
|
|
25
|
+
<div class="left">
|
|
26
|
-
<div class="com_form01-file02">
|
|
27
26
|
|
|
28
|
-
|
|
27
|
+
<!-- ファイル選択 -->
|
|
28
|
+
<div class="file">
|
|
29
|
-
<label class="
|
|
29
|
+
<label class="file_wrap">
|
|
30
|
-
<input type="file" name="mitsumori[0]"
|
|
31
|
-
|
|
30
|
+
<input type="file" name="file" class="fileinput">ファイルを選択</label>
|
|
32
31
|
<span class="filename"></span>
|
|
33
32
|
</div>
|
|
34
33
|
|
|
35
|
-
<!--
|
|
34
|
+
<!-- 文字入力 -->
|
|
36
|
-
<label class="block-fields01-text"
|
|
37
|
-
|
|
35
|
+
<label class="text" for="photo_area[0]">写真のタイトル</label>
|
|
38
|
-
<input type="text" id="photo_area[0]"
|
|
39
|
-
|
|
36
|
+
<input type="text" id="photo_area[0]" name="photo_area[0]" placeholder="" value="">
|
|
40
37
|
|
|
41
|
-
<!-- ラジオボタン -->
|
|
42
|
-
<label class="block-fields01-text">状態</label>
|
|
43
|
-
<div
|
|
44
|
-
class="block-fields01-radio radio-reset">
|
|
45
38
|
|
|
39
|
+
<!-- ラジオボタン -->
|
|
40
|
+
<label class="text">写真の評価</label>
|
|
46
|
-
|
|
41
|
+
<div class="radio">
|
|
47
|
-
<input type="radio" name="area_status[0]"
|
|
48
|
-
value="1"
|
|
49
|
-
id="area_status-a[0]"><span>A</span></label>
|
|
50
42
|
|
|
51
|
-
<label for="
|
|
43
|
+
<label for="status-a[0]">
|
|
52
|
-
<input type="radio" name="area_status[0]"
|
|
53
|
-
value="2"
|
|
54
|
-
|
|
44
|
+
<input type="radio" name="status[0]" value="1" id="status-a[0]"><span>A</span></label>
|
|
55
|
-
<label for="area_status-c[0]">
|
|
56
|
-
<input type="radio" name="area_status[0]"
|
|
57
|
-
value="3"
|
|
58
|
-
id="area_status-c[0]"><span>C</span></label>
|
|
59
45
|
|
|
46
|
+
<label for="status-b[0]">
|
|
47
|
+
<input type="radio" name="status[0]" value="2" id="status-b[0]"><span>B</span></label>
|
|
48
|
+
<label for="status-c[0]">
|
|
49
|
+
<input type="radio" name="status[0]" value="3" id="status-c[0]"><span>C</span></label>
|
|
50
|
+
|
|
60
|
-
<label for="
|
|
51
|
+
<label for="status-d[0]">
|
|
61
|
-
<input type="radio" name="area_status[0]"
|
|
62
|
-
value="4"
|
|
63
|
-
|
|
52
|
+
<input type="radio" name="status[0]" value="4" id="status-d[0]"><span>D</span></label>
|
|
64
53
|
</div>
|
|
65
54
|
</div>
|
|
66
55
|
|
|
67
|
-
<!-- テキストエリア
|
|
56
|
+
<!-- テキストエリア -->
|
|
68
|
-
<div class="
|
|
57
|
+
<div class="right">
|
|
69
|
-
<label for="comment[0]"
|
|
70
|
-
|
|
58
|
+
<label for="comment[0]" class="textarea-tit">コメント</label>
|
|
71
|
-
<textarea class="block-fields01-textarea"
|
|
72
|
-
|
|
59
|
+
<textarea class="textarea" name="comment[0]" id="comment[0]"
|
|
73
60
|
placeholder=""></textarea>
|
|
74
61
|
</div>
|
|
75
62
|
</div>
|
|
76
63
|
</div>
|
|
77
|
-
|
|
78
|
-
<!-- 追加ボタン -->
|
|
79
64
|
<div class="add_btn-block">
|
|
80
65
|
<button id="add_btn" type="button">＋</button>
|
|
81
66
|
</div>
|
|
67
|
+
|
|
82
68
|
```
|
|
83
69
|
|
|
70
|
+
|
|
71
|
+
|
|
84
72
|
### JS
|
|
85
73
|
|
|
86
74
|
```script.js
|
|
75
|
+
|
|
87
76
|
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
|
|
88
77
|
|
|
89
|
-
<!-- ファイル入力でファイル名表示 -->
|
|
90
|
-
<script>
|
|
91
|
-
$('.com_form01-file02 .fileinput').on('change', function () {
|
|
92
|
-
var file = $(this).prop('files')[0];
|
|
93
|
-
$(this).closest('.com_form01-file02').find('.filename').text(file.name);
|
|
94
|
-
});
|
|
95
|
-
</script>
|
|
96
|
-
|
|
97
|
-
<!-- #btn_addクリックでフォーム複製 -->
|
|
98
78
|
<script type="text/javascript">
|
|
99
79
|
|
|
100
80
|
$(function () {
|
|
@@ -102,11 +82,11 @@
|
|
|
102
82
|
$('button#add_btn').click(function () {
|
|
103
83
|
|
|
104
84
|
var tr_form = '' +
|
|
105
|
-
'<div class="
|
|
106
|
-
'<div class="
|
|
85
|
+
'<div class="item">' +
|
|
86
|
+
'<div class="left"> <div class="file"> <label class="file_wrap"> <input type="file" name="file" class="fileinput">ファイルを選択</label> <span class="filename"></span> </div><label class="text" for="photo_area[0]">写真のタイトル</label> <input type="text" id="photo_area[0]" name="photo_area[0]" placeholder="" value=""> <label class="text">写真の評価</label> <div class="radio"> <label for="status-a[0]"> <input type="radio" name="status[0]" value="1" id="status-a[0]"><span>A</span></label> <label for="status-b[0]"> <input type="radio" name="status[0]" value="2" id="status-b[0]"><span>B</span></label> <label for="status-c[0]"> <input type="radio" name="status[0]" value="3" id="status-c[0]"><span>C</span></label> <label for="status-d[0]"> <input type="radio" name="status[0]" value="4" id="status-d[0]"><span>D</span></label> </div></div><div class="right"> <label for="comment[0]" class="textarea-tit">コメント</label> <textarea class="textarea" name="comment[0]" id="comment[0]" placeholder=""></textarea> </div></div>' +
|
|
107
87
|
'</div>';
|
|
108
88
|
|
|
109
|
-
$(tr_form).appendTo($('.
|
|
89
|
+
$(tr_form).appendTo($('.items'));
|
|
110
90
|
|
|
111
91
|
});
|
|
112
92
|
|