回答編集履歴

1

FormData

2017/08/16 14:02

投稿

think49
think49

スコア18166

test CHANGED
@@ -1,3 +1,7 @@
1
+ ### HTMLFormElement.elements
2
+
3
+
4
+
1
5
  見たところ、`[name="database"]` は `.gpa` 直下にしか存在しないので、classで制限するまでもなく、下記コードでいいのではないでしょうか。
2
6
 
3
7
 
@@ -7,6 +11,10 @@
7
11
  document.getElementById('insert_form').elements['database']
8
12
 
9
13
  ```
14
+
15
+
16
+
17
+ ### querySelectorAll
10
18
 
11
19
 
12
20
 
@@ -22,4 +30,138 @@
22
30
 
23
31
 
24
32
 
33
+ ### FormData
34
+
35
+
36
+
37
+ IE11- 用に Polyfill が必要ですが、FormData を使うと、楽ですね。
38
+
39
+
40
+
41
+ - [jimmywarting/FormData: HTML5 `FormData` polyfill for Browsers.](https://github.com/jimmywarting/FormData)
42
+
43
+
44
+
45
+ ```HTML
46
+
47
+ <form method="POST" name="insert" action="insert.php" onsubmit="count()" id="insert_form">
48
+
49
+ <table id="insert">
50
+
51
+ <thead>
52
+
53
+ <tr>
54
+
55
+ <th>科目情報</th>
56
+
57
+ <th>成績評価</th>
58
+
59
+ </tr>
60
+
61
+ </thead>
62
+
63
+ <tbody>
64
+
65
+ <tr>
66
+
67
+ <td>データベース</td>
68
+
69
+ <td class="gpa">
70
+
71
+ <input type="radio" id="zero_database" name="database" value="0" checked>
72
+
73
+ <label for="zero_database">不可</label>
74
+
75
+ <input type="radio" id="one_database" name="database" value="1">
76
+
77
+ <label for="one_database">可</label>
78
+
79
+ <input type="radio" id="two_database" name="database" value="2">
80
+
81
+ <label for="two_database">良</label>
82
+
83
+ <input type="radio" id="three_database" name="database" value="3">
84
+
85
+ <label for="three_database">優</label>
86
+
87
+ <input type="radio" id="four_database" name="database" value="4">
88
+
89
+ <label for="four_database">秀</label>
90
+
91
+ <input type="radio" id="none_database" name="database">
92
+
93
+ <label for="none_database">取得していない</label>
94
+
95
+
96
+
97
+ <input type="hidden" class="count" value="2">
98
+
99
+ </td>
100
+
101
+ </tr>
102
+
103
+ <tr>
104
+
105
+ <td>微積分</td>
106
+
107
+ <td class="gpa">
108
+
109
+ <input type="radio" id="zero_Calculus" name="Calculus" value="0" checked>
110
+
111
+ <label for="zero_Calculus">不可</label>
112
+
113
+ <input type="radio" id="one_Calculus" name="Calculus" value="1">
114
+
115
+ <label for="one_Calculus">可</label>
116
+
117
+ <input type="radio" id="two_Calculus" name="Calculus" value="2">
118
+
119
+ <label for="two_Calculus">良</label>
120
+
121
+ <input type="radio" id="three_Calculus" name="Calculus" value="3">
122
+
123
+ <label for="three_Calculus">優</label>
124
+
125
+ <input type="radio" id="four_Calculus" name="Calculus" value="4">
126
+
127
+ <label for="four_Calculus">秀</label>
128
+
129
+ <input type="radio" id="none_Calculus" name="Calculus">
130
+
131
+ <label for="none_Calculus">取得していない</label>
132
+
133
+
134
+
135
+ <input type="hidden" class="count" value="1">
136
+
137
+ </td>
138
+
139
+ </tr>
140
+
141
+ </tbody>
142
+
143
+ </table>
144
+
145
+ <input type="submit" value="送信">
146
+
147
+ </form>
148
+
149
+
150
+
151
+ <script>
152
+
153
+ 'use strict';
154
+
155
+ var formData = new FormData(document.getElementById('insert_form'));
156
+
157
+ console.log(formData.get('database')); // "0"
158
+
159
+ console.log(formData.get('Calculus')); // "0"
160
+
161
+ </script>
162
+
163
+ ```
164
+
165
+
166
+
25
167
  Re: imaharu さん