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

回答編集履歴

2

修正版

2019/10/31 04:24

投稿

yambejp
yambejp

スコア117906

answer CHANGED
@@ -27,4 +27,32 @@
27
27
  <input type="checkbox" name="hoge2" value="data2-3" readonly>
28
28
  <input type="submit" value="送信">
29
29
  </form>
30
+ ```
31
+
32
+ # 修正版
33
+ ```javascript
34
+ <script>
35
+ window.addEventListener('DOMContentLoaded', ()=>{
36
+ const f1=[].map.call(document.querySelectorAll('#form1 [type=checkbox]'),x=>x);
37
+ const f2=[].map.call(document.querySelectorAll('#form2 [type=text]'),x=>x);
38
+ f1.forEach(x=>x.addEventListener('change',()=>{
39
+ const idx=f1.indexOf(x);
40
+ f2[idx].disabled=!x.checked;
41
+ }));
42
+ f2.forEach(x=>x.disabled=true);
43
+ });
44
+ </script>
45
+ <form id="form1">
46
+ <input type="checkbox" name="hoge[]" value="data1-1">
47
+ <input type="checkbox" name="hoge[]" value="data1-2">
48
+ <input type="checkbox" name="hoge[]" value="data1-3">
49
+ <div id="getData">GET</div>
50
+ </form>
51
+
52
+ <form id="form2">
53
+ <input type="text" name="hoge2[]" value="data2-1">
54
+ <input type="text" name="hoge2[]" value="data2-2">
55
+ <input type="text" name="hoge2[]" value="data2-3">
56
+ <input type="submit" value="送信">
57
+ </form>
30
58
  ```

1

sample

2019/10/31 04:24

投稿

yambejp
yambejp

スコア117906

answer CHANGED
@@ -1,3 +1,30 @@
1
1
  フレームなどがからまない同じページ内であれば不可能ではないと思いますが
2
2
  むしろ別のフォームで送信する意味はないと思います
3
- 送信しないフォームはなんのためにあるのでしょうか?
3
+ 送信しないフォームはなんのためにあるのでしょうか?
4
+
5
+ # sample
6
+ ```javascript
7
+ <script>
8
+ window.addEventListener('DOMContentLoaded', ()=>{
9
+ const f1=[].map.call(document.querySelectorAll('#form1 [type=checkbox]'),x=>x);
10
+ const f2=[].map.call(document.querySelectorAll('#form2 [type=checkbox]'),x=>x);
11
+ f1.forEach(x=>x.addEventListener('change',()=>{
12
+ const idx=f1.indexOf(x);
13
+ f2[idx].checked=x.checked;
14
+ }));
15
+ });
16
+ </script>
17
+ <form id="form1">
18
+ <input type="checkbox" name="hoge1" value="data1-1">
19
+ <input type="checkbox" name="hoge1" value="data1-2">
20
+ <input type="checkbox" name="hoge1" value="data1-3">
21
+ <div id="getData">GET</div>
22
+ </form>
23
+
24
+ <form id="form2" action="hogehoge" method="post">
25
+ <input type="checkbox" name="hoge2" value="data2-1" readonly>
26
+ <input type="checkbox" name="hoge2" value="data2-2" readonly>
27
+ <input type="checkbox" name="hoge2" value="data2-3" readonly>
28
+ <input type="submit" value="送信">
29
+ </form>
30
+ ```