formを入れ子で使いたい場合の対応
オメェのシステム設計が悪いんだオラァ! と言われればそこまでなのですが、とある画面で、二つのformを内包するformを作りたいと思いました。
コードを書くと、こんな感じ。
<form id="親">
<form id="子1">
<intput type="text" id="child_txt_1">
</form>
<form id="子2">
<intput type="text" id="child_txt_2">
</form>
<input type="button" value="送信">
</form>
それぞれ、子1,2で入力された値を親フォームのsubmit先で使いたい。
で、これをこのままにすると、formは入れ子が許されていないので、送信を押すと子1のformがsubmitされました。
困ったなぁと調べたところ、HTML5から、inputにform属性が追加になっていることが分かりました。
これを指定してあげると、formの中に入っていなくても、form属性で指定したidの方に属してくれることが分かりました。
なので、以下のように修正。
<form id="子1">
<intput type="text" id="child_txt_2" form="親">
</form>
<form id="子2">
<intput type="text" id="child_txt_2" form="親">
</form>
<form id="親">
<input type="button" value="送信">
</form>
これで送信ボタン押してあげると、formが親に指定されている値がpostされます。