JavaScriptで追加したフォームの数に関して

Question

###前提
[会員登録ページ]
・名前入力フォーム
・性別セレクトボックス (男/女)
・状態プルダウンメニュー（DBから取得したものをリスト）
・「登録」ボタン

[DB]
・状態テーブル [小学1年生、小学2年生、小学3年生、小学4年生、小学5年生、小学6年生]
・会員テーブル [名前カラム:性別カラム:状態カラム]（ここに登録したい）

が存在するとする。

###行いたいこと

1. 「＋」ボタンをクリックで「状態プルダウンメニュー」を追加
2. 「ー」ボタンをクリックで最後に追加した「プルダウンメニュー」を削除
3. 「＋」ボタンで「状態プルダウンメニュー」を2つ追加した場合、テーブルの1行目に1つ目の「状態」と「名前」「性別」が登録され、2行目には2つ目の「状態」と「名前」「性別」が登録される様にしたい。

入力内容 : 
       名前「田中 太郎」
       性別「男」を選択
       状態1「小学1年生」
       状態2「小学2年生」


    ↓登録


想定結果 : 
    会員テーブル
      1行目
       名前:「田中太郎」
       性別:「男」
       状態1:「小学1年生」
      2行目
       名前:「田中太郎」
       性別:「男」
       状態2:「小学2年生」

###進捗状態
「＋」ボタンで状態フォームの追加と
「ー」ボタンで最後に追加したフォームの削除は実装できたのですが、
追加したフォームの数をどのようにPHP側でカウントし、DBに登録する際に利用していいかがいまいちパッと思いつきません。
どうすればうまいことできるんでしょうか？

var $count = 1;
//仕様フォーム追加
function add_orderform()
{
      var element = document.createElement('div'); 
       element.innerHTML = 'プルダウンメニュー'
       element.setAttribute("name", "additem_" + $count);

      var objBody = document.getElementById("-----"); 
      objBody.appendChild(element);
}

//フォームを削除
function remove_orderform()
{
        if ( $count == 1 ) { return; }

        var field = document.getElementById("-----");
        field.removeChild(field.lastChild);
        $count = --$count;
}

<!-- 仕様名追加ボタンと削除ボタン -->
 <button id="" class="" type="button" onclick="add_orderform()">+</button>
 <button id="" class="" type="button" onclick="remove_orderform()">-</button>

Comments

[masaya_ohashi]

これだけのコードでは回答するのは難しいです。フォームのHTMLと、add_orderform、remove_orderformを質問文に追記してください。
追記 すみません、add_orderformとremove_orderformは書かれてましたね…

Answer 1

状態を配列で渡すフォームを作るとなると、以下のようになります。

<form>
    <input name="名前" type="text">

    <input name="性別" type="radio" value="男">
    <input name="性別" type="radio" value="女">

    <select name="状態[]">
        <option value="小学1年生">小学1年生</option>
        <option value="小学2年生">小学2年生</option>
        <option value="小学3年生">小学3年生</option>
        <option value="小学4年生">小学4年生</option>
        <option value="小学5年生">小学5年生</option>
        <option value="小学6年生">小学6年生</option>
    </select>
    <select name="状態[]">
        <option value="小学1年生">小学1年生</option>
        <option value="小学2年生">小学2年生</option>
        <option value="小学3年生">小学3年生</option>
        <option value="小学4年生">小学4年生</option>
        <option value="小学5年生">小学5年生</option>
        <option value="小学6年生">小学6年生</option>
    </select>
    <select name="状態[]">
        <option value="小学1年生">小学1年生</option>
        <option value="小学2年生">小学2年生</option>
        <option value="小学3年生">小学3年生</option>
        <option value="小学4年生">小学4年生</option>
        <option value="小学5年生">小学5年生</option>
        <option value="小学6年生">小学6年生</option>
    </select>
    <select name="状態[]">
        <option value="小学1年生">小学1年生</option>
        <option value="小学2年生">小学2年生</option>
        <option value="小学3年生">小学3年生</option>
        <option value="小学4年生">小学4年生</option>
        <option value="小学5年生">小学5年生</option>
        <option value="小学6年生">小学6年生</option>
    </select>
</form>

このように、パラメータ名の後ろに[]とつけることで、同一名のパラメータをPHP側で配列で受け取ることができます。

$statusList = $_REQUEST["状態"]; // 状態が3つあるなら3つの配列になる
foreach($statusList as $status) {
    echo $status;
}

これを踏まえ、add_orderformやremove_orderformは状態[]という名前のselectタグを増やしたり減らしたりする処理を書けばよいです。

Comments

[mochikuzu]

とても分かり易かったです！無事実装できました！ありがとうございます！