JSP購物車即時獲取輸入框數量的JavaScript實作

在 JSP 購物車頁面中，若需即時獲取數量輸入框（<input type="text" name="value">）的值並進行加減操作，無需後端介入，可直接使用 JavaScript 或 jQuery 在前端完成。

原生 JavaScript 寫法

// 為輸入框添加 id 屬性，例如 id="qtyInput"
var input = document.getElementById("qtyInput");
var number = input.value; // 取得字串值
number = parseInt(number) || 0; // 轉為數字，預設 0

// 加減操作範例
number += 1; // 或 number -= 1

// 寫回輸入框
input.value = number;

jQuery 簡潔寫法

var $input = $("#qtyInput");
var number = parseInt($input.val()) || 0;
number += 1; // 依需求增減
$input.val(number);

關鍵點總結

• 務必為輸入框設定唯一 id，方便選取。
• 取得值後記得用 parseInt 轉型，避免字串串接錯誤。
• 若需即時回應，可綁定 input 或 change 事件，於使用者輸入或按鈕點擊時觸發上述邏輯。
• 前端修改值後，表單提交時會自動攜帶最新值送往後端，無需額外處理。

此做法適用於簡單購物車數量調整，若涉及庫存驗證或價格重算，建議搭配 AJAX 非同步請求後端 API。