JSP JSTL 遍歷列表動態輸入框值無法通過 href 獲取：表單提交與 AJAX 兩種解法

問題代碼

<c:forEach var="a" items="${list}">
  <input type="text" name="giftMessage" id="${a}.giftMessage" value="${a.giftMessage}" />
  <a href="##.do?giftMessage=${a.giftMessage}">提交</a>  <!-- 傳的是初始值，非用戶修改後的值 -->
</c:forEach>

根因

${a.giftMessage} 是**服務端渲染時的初始值**寫死在 href 中。用戶在輸入框修改後，**href 不會自動更新**，點擊仍發送舊值。

方案一：表單提交（最簡單，整頁跳轉）

<c:forEach var="a" items="${list}" varStatus="vs">
  <form action="save.do" method="post">
    <input type="hidden" name="id" value="${a.id}" />
    <input type="text" name="giftMessage" value="${a.giftMessage}" />
    <button type="submit">保存</button>
  </form>
</c:forEach>

每行一個獨立 <form>，提交時瀏覽器自動攜帶**當前輸入框最新值**。

方案二：AJAX 無刷新（體驗更好）

<c:forEach var="a" items="${list}" varStatus="vs">
  <input type="text" class="gift-msg" data-id="${a.id}" value="${a.giftMessage}" />
  <button class="btn-save" data-id="${a.id}">保存</button>
</c:forEach>

<script>
$('.btn-save').click(function() {
    var $row = $(this).closest('tr');  // 或父容器
    var id = $(this).data('id');
    var msg = $row.find('.gift-msg').val();  // 獲取當前最新值
    $.post('save.do', {id: id, giftMessage: msg}, function(res) {
        alert('保存成功');
    });
});
</script>

方案三：動態更新 href（不推薦，易出錯）

<input type="text" class="gift-msg" onblur="updateHref(this)" />
<a class="lnk-save" href="#">提交</a>

<script>
function updateHref(input) {
    var newVal = input.value;
    $(input).siblings('.lnk-save').attr('href', 'save.do?giftMessage=' + encodeURIComponent(newVal));
}
</script>

對比總結

總結

JSP 渲染的 href 只能攜帶**初始值**。要獲取用戶**修改後的值**，必須用 **表單提交** 或 **AJAX 讀取當前 DOM 值** 發送。推薦 AJAX 方案，代碼可控、體驗佳。