単一のinputタグを複数のformに関連付けるにはどうすればいいですか？

Question

実現したいこと

単一のcheckboxを複数のformに関連付けるようにしたいです。
例えば以下のコードの様になっている時に「formA」と「formB」に「checkbox」の値を関連付けたいです。

<input id="checkbox" type="checkbox">
<form id="formA" action="~"></form>
<form id="formB" action="~"></form>

発生している問題・分からないこと

単一のcheckboxを複数のformに関連付けるにはどうすればいいか分からないです。

該当のソースコード

<input id="checkbox" type="checkbox"> <form id="formA" action="/formA"> <button>ボタンA</button> </form> <form id="formB" action="/formB"> <button>ボタンA</button> </form> ``` ```

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

・inputタグのform属性を使えば一つのformと関連付けられる事は分かったのですが、一つだけでなく複数のformに関連付ける事はできないようでした。
参考サイト

補足

laravel、phpを使っています。
プログラミングは始めたばかりです。
よろしくお願いします！

Comments

[yambejp]

なぜ２つのformを1つのチェックボックスで処理する必要があるのでしょうか？

[satou_123]

1つのチェックボックスの値を2つのフォームのどちらにも送信したかった為です。

Answer 1

javasriptで切り替えれば（もしくはチェックしたときにhiddenなどで値を渡すなどで）できますが、HTML単体では無理です

<script>
document.addEventListener('submit',({target})=>{
  chk.setAttribute('form',target.id);
});
</script>
<input id="chk" type="checkbox" name="xxx" value="1">
<form id="formA">
<input name="aaa" value="2">
<input type="submit" value="send a">
</form>
<form id="formB">
<input name="bbb" value="3">
<input type="submit" value="send b">
</form>

値を送りたいのではなくチェックボックスで送信の制限をしたいならこんな感じ？

<script>
document.addEventListener('click',({target})=>{
  if(target.matches('[type=submit]')){
    chk.setAttribute('form',target.form.id);
  }
});
</script>
<input id="chk" type="checkbox" required>
<form id="formA">
<input name="aaa" value="1">
<input type="submit" value="send a">
</form>
<form id="formB">
<input name="bbb" value="2">
<input type="submit" value="send b">
</form>

Comments

[satou_123]

返信遅くなってすみません。
ありがとうございます！教えて頂いた通りに記述すると上手く行きました。
ただ以下のコードのchk変数を宣言する部分が無いと上手く動かないようでした。
```
document.addEventListener('submit',({target})=>{
const chk = document.getElementById('chk');
chk.setAttribute('form',target.id);
});
```
丁寧に回答して頂きありがとうございました！

Answer 2

一応コードの全文を下記に載せておきます。

<input id="check" name="check" type="checkbox" value="hello">

<form id="formA" action="/form_a" method="get">
    <input type="submit" value="send a">
</form>

<form id="formB" action="/form_b" method="get">
    <input type="submit" value="send b">
</form>

<script>
document.addEventListener('submit',({target})=>{
    const chk = document.getElementById('check');
    chk.setAttribute('form',target.id);
});
</script>

// フォーム表示
Route::get('/form',[TestController::class, 'displayForm']);
// フォームA
Route::get('/form_a',[TestController::class, 'formATest']);
// フォームB
Route::get('/form_b',[TestController::class, 'formBTest']);

public function displayForm() {
        return view('post.test');
    }

    public function formATest(Request $req) {
        $check = $req->input('check');
        Log::info('取得したデータ: '.$check);
        return redirect('/form');
    }
    
    public function formBTest(Request $req) {
        $check = $req->input('check');
        Log::info('取得したデータ: '.$check);
        return redirect('/form');
    }