回答編集履歴
1
tuiki
answer
CHANGED
|
@@ -16,4 +16,25 @@
|
|
|
16
16
|
<input type="text" name="fuga" data-color="blue" data-size="12px" value="鈴木">
|
|
17
17
|
<input type="submit" value="send">
|
|
18
18
|
</form>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
nameを工夫できるならこうするとサーバー側でデータが取り出しやすいかもしれません
|
|
22
|
+
```javascript
|
|
23
|
+
<script>
|
|
24
|
+
window.addEventListener('DOMContentLoaded', ()=>{
|
|
25
|
+
document.querySelector('form').addEventListener('formdata',(e)=>{
|
|
26
|
+
e.target.querySelectorAll('[name$="[value]"]').forEach(x=>{
|
|
27
|
+
Object.entries({...x.dataset}).forEach(y=>{
|
|
28
|
+
const name=x.name.replace(/[value]$/,'')+`[${y[0]}]`;
|
|
29
|
+
e.formData.append(name,y[1]);;
|
|
30
|
+
});
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
});
|
|
34
|
+
</script>
|
|
35
|
+
<form>
|
|
36
|
+
<input type="text" name="hoge[value]" data-color="red" data-size="18px" value="山田">
|
|
37
|
+
<input type="text" name="fuga[value]" data-color="blue" data-size="12px" value="鈴木">
|
|
38
|
+
<input type="submit" value="send">
|
|
39
|
+
</form>
|
|
19
40
|
```
|