一つの画面内にformを共有する二つのsubmitボタンを配置したい

いつもお世話になっております。
htmlにおいて下記のような画面構成を作成しておりボタンが二つあります。

「form①」
「ボタン①」(form①とform②の値を受けとりactionAへ進む)
「ボタン②」(form②のみの値を受け取りactionBへ進む)
「form②」

上記の通り、受け取りたい値が一部、共有しており、かつ、actionの値が異なります。
form属性を使用すればうまくルーティングできそうなのですが、form属性はIE非対応の為、以下コードの通りJavaScriptを使用してみました。
しかしボタン②は正常に動作するのですがボタン①が正常に動作しません。
form①の値がない旨のエラーが吐かれ、検証ツールにて確認したところform②の値のみ正常に持ってこれてるようです。

知恵をお借りできないでしょうか。

html
1<form method="post" id="form1"></form>
2<button type="button" id="button1">ボタン１</button>
3<button type="button" id="button2">ボタン２</button>
4<form method="post" id="form2"></form>

javascript
1//ボタン１
2  $("#button1").click(function(){
3    $('#form1').attr('action', '/routeA');
4    $('#form1').submit();
5    $('#form2').attr('action', '/routeA');
6    $('#form2').submit();
7 });
8//ボタン２
9 $("#button2").click(function(){
10    $('#form2').attr('action', '/routeB');
11    $('#form2').submit();
12 });
13  
14

行動規範の内容に同意します

回答1件

ベストアンサー

連続でSubmitしてもform1とform2のデータが合体して送られるわけではなく、
form1のデータでSubmit、form2のデータでSubmitが連続で行われるだけです。

Submitの直前にform2配下の要素をform1に追加(コピー)してやると
お望みの挙動になるかと。

JavaScript
1//ボタン１
2  $("#button1").click(function(){
3    $('#form2 *').each(function(){
4        $('#form1').append($(this));
5    });
6    $('#form1').attr('action', '/routeA');
7    $('#form1').submit();
8 });