質問: 画像ファイルを非同期で送信するフォームを作成しています。 コードはフォームの一部分で画像に関連する箇所となります。 他にも多くの情報を入力するフォームになっており、全体で1つのフォームです。 ``` 画像1 画像削除 画像2 画像削除 画像3 画像削除 ``` 画像ファイルは``のイベントを使ってJavascriptで送信します。 この時に関連するフォームの値を一緒に送信するようにしたいです。 例えば``の画像が選択された場合は``の値を取得したいのですが、現状はimage_2だったらimage_seq_2と決め打ちで取得しています。 こういう処理をする場合に、項目を関連付けさせる方法はないのでしょうか? 関連する項目のセットをフォームで括れたらよかったのですが、全体で1つのフォームなのでフォームを入れ子にすることができず何かいい方法を探しています。 よろしくお願いします。
回答: ### form 属性 HTML5 ならフォームを入れ子に出来ますが、IE11-, Edge が未だに対応してないんですね...。 * Form attribute - Can I use... ### なぜ一つのフォームにするのか ところで、なぜ一つのフォームになるのでしょうか。 掲示された情報からは個別のフォームを作るのが妥当だと思いますが、その後の処理に一つのフォームであるべき理由が存在するのでしょうか。 個別の処理で支障が出ているのであれば、全体の処理も踏まえて設計を見直すべき問題だと思います。 ### 一つのフォームで同系input要素を関連付ける 一つのフォームで関連付ける場合、構造や名前に一定の法則をつける方法があります。 * input要素に `#hoge2-select`, `#hoge2-seq` のようにidの命名規則で同グループを捕捉しやすくする * input要素に `.hoge-2` のような同じクラス名を付ける * 構造上の配置で指定する(tkanda さんの案) * 祖先となるli要素に id をつけて `document.querySelectorAll('#parent-2 input')` Re: msx2 さん