クリックしたinputタグのhidden属性のvalueをPOSTしたい
解決したいこと
クリックされたリストのhiddenのvalueを次の画面へPOSTしたい。
内容的には、こちらと同じです。
https://teratail.com/questions/154379
解決策をご教示いただきたいです。
発生している問題・エラー
どこをクリックしても、最後に生成されたinputタグのvalueの値が送信されてしまう。
下記のコード(hoge.js)を実行
hoge.js
const ul = document.createElement('ul')
for(let i=0; i<=userInfo.length-1; i++){
list = document.createElement('li')
display = document.createElement('input')
display.setAttribute('type', 'submit')
display.setAttribute('value', userInfo[i].firstName)+' '+userInfo[i].lastName)+' '+userInfo[i].sex)+' '+userInfo[i].dayOfBirth+' '+userInfo[i].age))
hidden = document.createElement('input')
hidden.setAttribute('type', 'hidden')
hidden.setAttribute('name', 'userInfo')
hidden.setAttribute('value', userInfo[i].id)
ul.appendChild(list)
display.appendChild(hidden)
list.appendChild(display)
}
このようなDOM(hoge.html)が生成されます。
liタグ一つ最初のリストをクリックし、1つ目のvalue(value=1)を送信したいのですが、最後に生成されたvalue(value=3)が次の画面へ送信されてしまいます。
hoge.html
<ul id="parent">
<li>
<input type="submit" value="Mike Hoge man 20230101 0">
<input type="hidden" name="userInfo" value="1">
</li>
<li>
<input type="submit" value="Annie Hoge woman 20230101 0">
<input type="hidden" name="userInfo" value="2">
</li>
<li>
<input type="submit" value="Micheal Hoge man 20230101 0">
<input type="hidden" name="userInfo" value="3">
</li>
</ul>
0 likes
