inputタグのvalue属性の値が上書きされてしまう

Question

前提・実現したいこと

inputタグのhidden属性で値を保持したいのですが、
カレー → ハンバーグの順に選択をすると　最後にクリックしたハンバーグのデータのみに上書きされてしまいます。
それぞれのデータ分の数だけ値を保持させたいのです。
よろしくお願いいたします。

     "menu_name" => array:4 [▼
        0 => "ハンバーグ"
        1 => null
      ]
      "menu_cd" => array:4 [▼
        0 => "21"
        1 => null
      ]
コード

該当のソースコード

                  <table class="table table-hover table-bordered">
                        <thead class="thead-light" style="position: sticky; top: 0; z-index: 1;">
                            <tr>
                                <th scope="col" class="text-center">選択</th>
                                <th scope="col" class="text-center">メニュー</th>
                                <th scope="col" class="text-center">メニューCD</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                               <td class="text-center"><button class="btn btn-success ml-2" type="button" onclick="selectStore(this)">選択</button></td>
                               <td>カレー</td>
                               <td>19</td>
                            </tr>
                            <tr>
                               <td class="text-center"><button class="btn btn-success ml-2" type="button" onclick="selectStore(this)">選択</button></td>
                               <td>ハンバーグ</td>
                               <td>21</td>
                            </tr>
                        </tbody>
                    </table>

function selectStore(obj) {
            let Row = obj.closest('tr')
            let Cells = Row.getElementsByTagName("td")
            let storeName = Cells[1].innerText
            let storeCd = Cells[2].innerText
            this.newRow(menuName, menuCd)
        }

        function newRow(menuName, menuCd) {
            const input = document.createElement("input")
            input.setAttribute("type", "hidden")
            input.setAttribute("name", "menu_name[]")
            input.setAttribute("id", "menuName")
            document.getElementById("inputForm").appendChild(input)
            document.getElementById('menuName').value = menuName

            const input2 = document.createElement("input")
            input2.setAttribute("type", "hidden")
            input2.setAttribute("name", "menu_cd[]")
            input2.setAttribute("id", "MenuCd")
            document.getElementById("inputForm").appendChild(input2)
            document.getElementById('menuCd').value = menuCd
        }

Answer 1

ご質問のコードだけでは「menuNameやmenuCdがない」「inputFormというidを持つ要素がない」等、エラーが出て状況が再現できなかったのですが、内容から察するにdocument.getElementById('menuName').value = menuNameが原因でしょう。

HTMLにおけるid属性はそのドキュメント内で一意でなければなりません。
言い換えれば、複数の要素に対して同じidをつけることはできず、idがわかればその要素を特定できるということです。

そのため、document.getElementById('menuName').value = menuNameとしてしまうと毎回同じ要素のvalue属性に値を代入することとなり、最後に選択した値しか保存されないという状況になります。

保存すべきはnewRow()内で作ったinputやinput2のvalueではないでしょうか。

const input = document.createElement("input")

input.setAttribute("type", "hidden")
input.setAttribute("name", "menu_name[]")
input.setAttribute("class", "menuName") // idではなくclassにしました
input.value = menuName

document.getElementById("inputForm").appendChild(input)

なお、classを基にドキュメント内の要素を検索したいときは、document.querySelector()やdocument.querySelectorAll()がCSSセレクタを使って検索できるのでおすすめです。

const menuNames = Array.from(document.querySelectorAll('.menuName'))

Comments

[meron88]

大変参考になりました。
ありがとうございます！