[FIXED] JavaScript submit form doesn't pass a hidden value correctly

Issue

I want to pass a hidden value without using a submit button.
I want the user to click on an item image and it will bring them to the item detail.

So, if they click on the tomato shown below, it will bring them to the tomato page.

This is what I do:

jsp:

<form action="ItemDetail" method="get" name="itemForm" id="itemForm">
<input type="hidden" name="itemId" id="itemId" value="<%= i.getItemID() %>">
  <a href="javascript: submitForm()">
    <img src="<%=i.getImg()%>"
  </a>
</form>

javascript:

function submitForm(){
    document.forms["itemForm"].submit();
}

servlet:

String itemId = request.getParameter("itemId");

Solution

I finally found out why. The javascript submit all the form because they all have the same name, so I changed the form id and make no changes to servlet

<form action="ItemDetail" method="get" name="itemForm" id="itemForm<%= i.getItemID() %>">
  <a href="javascript:{}" onclick="document.getElementById('itemForm<%= i.getItemID() %>').submit();">
  <input type="hidden" name="itemId" id="itemId" value="<%= i.getItemID() %>">

    <img src="<%=i.getImg()%>"
  </a>
</form>

Answered By - Sae