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

回答編集履歴

1

chousei

2025/07/03 08:44

投稿

yambejp
yambejp

スコア117921

answer CHANGED
@@ -20,4 +20,31 @@
20
20
  <input type="submit">
21
21
  </form>
22
22
  ```
23
- なお、ダミーであってもラジオボタンのvalueは設定しておかないと同じ値だと切り替えたことを認知してくれない場合がありますのでご留意ください
23
+ なお、ダミーであってもラジオボタンのvalueは設定しておかないと同じ値だと切り替えたことを認知してくれない場合がありますのでご留意ください
24
+
25
+ # 強制書き換え
26
+ 自分のページを強制的に書き換えるにはfetchして自分自身のhtmlを書き換えることになりそうですが、流石に強引すぎてあまりおすすめはできないですね
27
+ ```html
28
+ <script>
29
+ document.addEventListener('formdata',e=>{
30
+ new Set([...e.target.querySelectorAll('[data-nosend]')].map(x=>x.name)).forEach(x=>e.formData.delete(x));
31
+ });
32
+ document.addEventListener('invalid',e=>{
33
+ console.error(e.type);
34
+ },true);
35
+ window.addEventListener('submit', e => {
36
+ e.preventDefault();
37
+ fetch(location.href).then(res=>res.text()).then(html=>{
38
+ document.querySelector('html').innerHTML=html;
39
+ });
40
+ });
41
+ </script>
42
+ <form action="#">
43
+ <label><input type="radio" name="foo" value="1" data-nosend required>hoge</label>
44
+ <label><input type="radio" name="foo" value="2" data-nosend required>piyo</label>
45
+ <input name="xxx" value="1">
46
+ <input name="yyy" value="2">
47
+ <input name="zzz" value="3" data-nosend>
48
+ <input type="submit">
49
+ </form>
50
+ ```