フォームの各項目に、name属性以外に、順番などの情報を持たせる方法

Question

現在、動的に項目を追加できるフォームを作っています。

家族単位の項目を追加でき、家族内のメンバーも追加できるフォームです。

しかし、動的に増やした項目をDBに保存する方法がわからず、困り果ててしまいました。

用意したのは、以下のようなフォームです。

<form name="family_form" action="" method="post">

<ul class="family1">
  <li><input type="text" class="father" name="family[]" value="A父">
  <li><input type="text" class="mother" name="family[]" value="A母">
  <li><input type="text" class="child" name="family[]" value="A太郎">
  <li><input type="text" class="child" name="family[]" value="A次郎">
  <li>+メンバー追加ボタン（父か母、子の項目をjqueryで追加するためのボタン）
</ul>

<ul class="family2">
  <li><input type="text" class="father" name="family[]" value="B父">
  <li><input type="text" class="child" name="family[]" value="B子">
  <li><input type="text" class="child" name="family[]" value="B姫">
  <li>メンバー追加ボタン（fatherかmother、childの項目をjqueryで追加するボタン）
</ul>

<div>family追加ボタン</div>
※family追加ボタンを押すと、jqueryで以下の<ul>～</ul>が追加される。
<ul class="family+次の数字">
  <li>メンバー追加ボタン（fatherかmother、childの項目をjqueryで追加するボタン）
</ul>

<input type="submit" name="family_submit" value="家族一覧を保存">
</form>

上記のようなフォームを作ってみたは良いのですが、DBへの保存方法で頭がこんがらがってしまいました。

上記のform内容をPOSTし、DB上には、以下のように登録したいと思っています。

ID	家族のグループ	名前	メンバー種類	家族内の表示順序
1	family1	A父	father	1
2	family1	A母	mother	2
3	family1	A太郎	child	3
4	family1	A次郎	child	4
5	family2	B父	father	1
6	family2	B子	child	2
7	family2	B姫	child	3

しかし、問題が発生しました。

問題１：input要素が、どの<ul class="faily+数字">の要素内のものか、POST時に取得する方法がわからない。＝家族のグループをDBに登録できない

問題２：input要素のclass名をPOST時に取得する方法がわからない。＝メンバー種類をDBに登録できない

問題３：input要素が、<ul class="faily+数字">の要素内で、何番目の<li>のものか、POST時に取得する方法がわからない。＝家族内の表示順序をDBに登録できない

上記の問題の解決方法がわかれば、上の表のようなDBへの保存が実現できると考えたのですが、方法がわかりませんでした。

どなたか、上記のようなDBへの保存の方法の、解決の糸口をご教授いただけましたら幸甚に存じます。

何卒、何卒よろしくお願い申し上げます。

Answer 1

nameをfamily[1][father]のようにつければ扱いやすくなると思います。
「表示順序」についてはどういう風に決まるか次第ですが、
やはり入力は必要でしょう。
「追加順」なのであればorder[1][father]のようなnameのhiddenを追加のたびに作って番号を入れるとかですね。
順番の変更があるならその順番の変更イベントのときに同時に番号を振り直す。

Comments

[yayak]

本当にいつもありがとうございます。
わかりやすいご説明に、ただただ頭が下がる思いです。
早く、人の役に立てるサービスをもっとばりばり開発できるよう、精進いたします。
m.ts10806様、いつも本当に有難うございます。
心より感謝申し上げます。

[m.ts10806]

お礼は良いとして、結局どのように進められたのでしょうか。
https://teratail.com/help/question-tips#questionTips4-2

[yayak]

失礼いたしました<(_ _)>
m.ts10806様の教えてくださったとおりの方法で解決できました！
この部分の報告ができておらず、大変申し訳ございません。

今は、勉強と実験を兼ねて、
family[1][father][order]
のように、[]が3つにできないか試してみている段階なのですが、arrayがいっぱいでてきて、頭がぱんくしています。m.ts10806様のやり方が一番わかりやすいように感じています。

[m.ts10806]

関係性で決めれば良いと思います。
グループIDとfatherなどの「メンバー種類」は1ですが、orderは「そのIDの中の順番」なので管理としては別でメンバー種類とイコールにはなりません。
むしろ表示順だけ切り出して別テーブルにしても良いのではとも思います。
メンバー種類も決まっているのならマスタとして切り出してテーブルとしては３つにしてリレーション貼ると正規化できるかもしれません。
それも要件次第ですね。

[yayak]

> 表示順だけ切り出して別テーブルにしても良いのではとも思います
その発想はありませんでした！
コードを書くことと理解することが遅く、ぱっぱと作業を進められないためまだ実行には移せてはおりませんが、試行錯誤の中で上記の方法も試してみたいと思います<(_ _)>
m.ts10806様のような上司がほしい人生でした。

[m.ts10806]

というより。
コードをいきなり書くのではなくそれぞれの関係性を図としてまとめて
そこは手書きでも良いので「設計」してからコードを書くようにすると良いです。
1つのことを実現するための手段は１つではないので、「HOW」よりも「WHAT」や「WHY」部分をきっちり詰めておくと進めやすくなります。

[yayak]

有難うございます、肝に銘じます<(_ _)>！！