別formからvalueを受け取り自formでsubmitする方法

Question

<form id="form1">
  <input type="checkbox" name="hoge[]" value="data1-1">
  <input type="checkbox" name="hoge[]" value="data1-2">
  <input type="checkbox" name="hoge[]" value="data1-3">
  <div id="getData">GET</div>
</form>

<form id="form2" action="hogehoge" method="post">
  <input type="text" name="huga1" value="data2-1">
  <input type="text" name="huga2" value="data2-2">
  <input type="text" name="huga3" value="data2-3">
  <input type="submit" value="送信">
</form>

上記のイメージでform1のチェックボックス選択で取得した結果valueをform2に渡してsubmitしたいと考えています。
このような実装は可能でしょうか？色々と調べたのですが解決に至らず質問させていただきます。
解決に至るscript等ありましたら
申し訳ありませんがご教授願います。

Comments

[m.ts10806]

「可能です」だけよければそのように回答します。よくないのでした
ら自身が調べたこと試したこと含めて質問の仕方を整理してください。

[span]

色々と調べたのですが直結するような解決方法に至らず…
質問の仕方等以後気をつけます申し訳ありません。。

[m.ts10806]

「調べた」ということだけではどのような可能性や方向性を探ったのか他者には伝わりませんのでそこも具体的に記載してください。
今現在の内容だと「何も調べてないし試してないけどコードだけください」と言っているのと同義です。

Answer 1

フレームなどがからまない同じページ内であれば不可能ではないと思いますが
むしろ別のフォームで送信する意味はないと思います
送信しないフォームはなんのためにあるのでしょうか？

sample

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const f1=[].map.call(document.querySelectorAll('#form1 [type=checkbox]'),x=>x);
  const f2=[].map.call(document.querySelectorAll('#form2 [type=checkbox]'),x=>x);
  f1.forEach(x=>x.addEventListener('change',()=>{
    const idx=f1.indexOf(x);
    f2[idx].checked=x.checked;
  }));
});
</script>
<form id="form1">
  <input type="checkbox" name="hoge1" value="data1-1">
  <input type="checkbox" name="hoge1" value="data1-2">
  <input type="checkbox" name="hoge1" value="data1-3">
  <div id="getData">GET</div>
</form>

<form id="form2" action="hogehoge" method="post">
  <input type="checkbox" name="hoge2" value="data2-1" readonly>
  <input type="checkbox" name="hoge2" value="data2-2" readonly>
  <input type="checkbox" name="hoge2" value="data2-3" readonly>
  <input type="submit" value="送信">
</form>

修正版

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const f1=[].map.call(document.querySelectorAll('#form1 [type=checkbox]'),x=>x);
  const f2=[].map.call(document.querySelectorAll('#form2 [type=text]'),x=>x);
  f1.forEach(x=>x.addEventListener('change',()=>{
    const idx=f1.indexOf(x);
    f2[idx].disabled=!x.checked;
  }));
  f2.forEach(x=>x.disabled=true);
});
</script>
<form id="form1">
  <input type="checkbox" name="hoge[]" value="data1-1">
  <input type="checkbox" name="hoge[]" value="data1-2">
  <input type="checkbox" name="hoge[]" value="data1-3">
  <div id="getData">GET</div>
</form>

<form id="form2">
  <input type="text" name="hoge2[]" value="data2-1">
  <input type="text" name="hoge2[]" value="data2-2">
  <input type="text" name="hoge2[]" value="data2-3">
  <input type="submit" value="送信">
</form>

Comments

[kyoya0819]

質問者さんはGoogleformを使いたいとか？
余計な詮索は良くないか....

[span]

ご回答ありがとうございます単純に作るページのデザイン・レイアウトの兼ね合いなのですがソース上の離れた場所にそれぞれマークアップする必要があります。おっしゃる通り一つのformで囲ってしまえば早いのですが…
それですとコードが雑になる懸念がありまして今回の質問をさせていただきました。

[yambejp]

サイトデザインの問題ならなぜnameを書き換えているのでしょうか？
またcheckboxで同名をつかっていると競合する可能性が高いですが
サーバー側の言語は何を想定していますか？

[yambejp]

とりあえず状況が確認できないですが、f1のチェックボックスを
f2のチェックボックスに反映させる方法だけsample上げておきました

[span]

ご回答ありがとうございます。
form1のvalueは配列で受け取る想定でした、またform2のinputのタイプはtextでありそのform2の結果に乗せてform1のチェックボックスで得た配列を乗せてsubmitさせるイメージでした。申し訳ないです。。
サーバーはphpです。
いただいたコード参考にしてもう少し調べてみます。ありがとうございます。

[yambejp]

修正版あげておきました