更新ボタンを押したらループで表示したリストのうち、一行のデータを変更する方法

Question

[実現]リストの一行ごとに実装している更新ボタンを押して、その行に対して入力した数値に更新するようにしたい。
いろいろ試しましたが、知識不足でうまくいきませんでした、知恵を貸していただけたら幸いです。

該当のソースコード

<form:form action="/sales/system" modelAttribute="salesForm">
			<table>
				<thead>
					<tr>
						<th>削除</th>
						<th>商品ID</th>
						<th>商品名</th>
						<th>単価</th>
						<th>点数</th>
						<th>小計</th>
						<th>更新</th>
					</tr>
				</thead>

				<tbody>
					<c:forEach items= "${allList}" var = "product" varStatus ="status">
						<tr>
							<td><form:checkbox path="delNumList" value="${status.count}"/></td>
							<td>${product.productId}</td>
							<td>${product.name}</td>
							<td>${product.unitPrice}</td>
							<td><input type="number" name="numPoint" min="1" max="100" value="${product.quantity}"></td>
							<td>${product.subtotal}</td>
							<td>
                        	<input type="hidden" name="reloadNum" value="${status.count}" />
                        	<input type="submit" name="reload" value="更新" />
                    		</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>

			<div>
				合計<c:out value="${total}"/>円
			</div>

			<div class="footer">
				<input type="submit" name="removeProduct" value="削除" />
				<input type="submit" name="fix" value="確定" />
			</div>
		</form:form>

/**
	 * 更新
	 * @param form フォームオブジェクト
	 * @param model モデルオブジェクト
	 * @return Add add.jsp
	 * */
	@RequestMapping(params = "reload")
	public String reload(SalesForm form, Model model) {

		int quantity = form.getNumPoint();

		int reloadNum = form.getReloadNum();


			if (reloadNum >= 0) {
				Product existingProduct = form.getAllList().get(reloadNum -1);

				existingProduct.setQuantity(quantity);
				existingProduct.setSubtotal(quantity * existingProduct.getUnitPrice());
				form.getAllList().set(reloadNum-1, existingProduct);
			}
			mysql.putTogether(model, form, mysql);

			form.clear();

			return ADD;
		}

試したこと

ループしたときの行数をフォームクラスのreloadNum変数に渡して、その行数ごとのオブジェクトに対して処理を行いたかったのですが、最初にリストに格納したものしか更新できず、二番目以降はダメでした。（というより、すべての更新ボタンが最初のオブジェクト用の更新ボタンになっています。）

Comments

[jimbe]

全部を 1 つの form で囲っているからでは。
行毎に form で囲む必要があると思います。

[THUTAYA]

ありがとうございます、短時間で問題点が分かるなんて感動しました。
もっと勉強します。

[jimbe]

ボタンを押した時は、そのボタンが含まれる form 内のデータが送られます。

<form> ←★
<table>
<thead>
<tr> ～ </tr>
</thead>
<tbody>
<c:forEach>
<tr> ～ </tr>
</c:forEach>
</tbody>
</table>
</form> ←★

となっていると、forEach 内の行のどのボタンを押しても大外の form の扱いとなり、その中で例えば input の name が同じモノは最初にあるものが送られると思います。

ですから、各行のボタン(と input 等)が別々の form に含まれるように、

<table>
<thead>
<tr> ～ </tr>
</thead>
<tbody>
<c:forEach>
<form> ←★
<tr> ～ </tr>
</form> ←★
</c:forEach>
</tbody>
</table>

の形にする必要があるのでは? ということです。

[THUTAYA]

formタグはいつも外側にあるものと思い込んでました。おかげで実現できる幅が広がりました。基本的な部分のご指摘だとは思いますが、ありがとうございました。

Answer 1

コメント欄のjimbeさんのアドバイス通りでした、ありがとうございます。form:formタグをループ内に新たに追加しただけです。

<form:form action="/sales/system" modelAttribute="salesForm">
			<table>
				<thead>
					<tr>
						<th>削除</th>
						<th>商品ID</th>
						<th>商品名</th>
						<th>単価</th>
						<th>点数</th>
						<th>小計</th>
						<th>更新</th>
					</tr>
				</thead>

				<tbody>
					<c:forEach items= "${allList}" var = "product" varStatus ="status">
						<form:form action="/sales/system" modelAttribute="salesForm">
							<tr>
								<td><form:checkbox path="delNumList" value="${status.count}"/></td>
								<td>${product.productId}</td>
								<td>${product.name}</td>
								<td>${product.unitPrice}</td>
								<td><input type="number" name="numPoint" min="1" max="100" value="${product.quantity}"></td>
								<td>${product.subtotal}</td>
								<td>
	                        	<input type="hidden" name="reloadNum" value="${status.count}" />
	                        	<input type="submit" name="reload" value="更新" />
	                    		</td>
							</tr>
						</form:form>
					</c:forEach>
				</tbody>
			</table>

			<div>
				合計<c:out value="${total}"/>円
			</div>

			<div class="footer">
				<input type="submit" name="removeProduct" value="削除" />
				<input type="submit" name="fix" value="確定" />
			</div>
		</form:form>