teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

tuiki

2021/09/09 00:51

投稿

yambejp
yambejp

スコア117946

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
  ```