質問: いつもお世話になっております。 htmlにおいて下記のような画面構成を作成しておりボタンが二つあります。 「form1」 「ボタン1」(form1とform2の値を受けとりactionAへ進む) 「ボタン2」(form2のみの値を受け取りactionBへ進む) 「form2」 上記の通り、受け取りたい値が一部、共有しており、かつ、actionの値が異なります。 form属性を使用すればうまくルーティングできそうなのですが、form属性はIE非対応の為、以下コードの通りJavaScriptを使用してみました。 しかしボタン2は正常に動作するのですがボタン1が正常に動作しません。 form1の値がない旨のエラーが吐かれ、検証ツールにて確認したところform2の値のみ正常に持ってこれてるようです。 知恵をお借りできないでしょうか。 ``` ボタン1 ボタン2 ``` ``` //ボタン1 $("#button1").click(function(){ $('#form1').attr('action', '/routeA'); $('#form1').submit(); $('#form2').attr('action', '/routeA'); $('#form2').submit(); }); //ボタン2 $("#button2").click(function(){ $('#form2').attr('action', '/routeB'); $('#form2').submit(); }); ```
回答: 連続でSubmitしてもform1とform2のデータが合体して送られるわけではなく、 form1のデータでSubmit、form2のデータでSubmitが連続で行われるだけです。 Submitの直前にform2配下の要素をform1に追加(コピー)してやると お望みの挙動になるかと。 ``` //ボタン1 $("#button1").click(function(){ $('#form2 *').each(function(){ $('#form1').append($(this)); }); $('#form1').attr('action', '/routeA'); $('#form1').submit(); }); ``` 若干強引ですが...