ショッピングサイトの商品カートページを作成しています。
ページの更新を行わずにページ内で個数の変更を行なって
計算結果を表示させたいと思っていますが、
最後に追加した商品しかjavascriptでの編集ができず困っています。
function goukei()内で使用しているiがfor文で作成された最終テーブルのidを指していることが原因なのですが、
画面で選択されたテーブルのセレクトボックス、テキストボックスを上手く指定する方法が思いつきません。
どなたか、アドバイス下さい。お願いします。
因みにカートのページではjavaでユーザが購入した商品をArrayListに蓄積していったものをfor文で繰り返して表示するようにしています。
--------------------------------------------
<%
//セッションからArrayListを取ってくる
ArrayList<KounyuMeisai> KounyuList = (ArrayList<KounyuMeisai>) session
.getAttribute("KounyuList");
%>
<table border=2 width=800 align=center>
<caption>【買い物かご】</caption>
<tr><th></th><th>商品名</th><th>商品種別</th><th>商品単価(円)</th><th>注文数</th><th>合計(円)</th><th></th></tr>
<%
//繰り返しでArrayListの中身を取ってくる
int i = 0;
int kou = 1;
int soukei = 0;
for (KounyuMeisai k : KounyuList) {
if (k.getNum() != 0) {
%>
<script>
function goukei() {
document.getElementById("kekka"+<%=i %>).value=document.getElementById("tanka"+<%=i %>).value *document.getElementById("kosuu"+<%=i %>).value;
}
</script>
<tr>
<th><%=kou%></th>
<th><%=k.getSname()%></th>
<th><%=k.getSkind()%></th>
<th><input type="text" value =<%=k.getSprice()%> id=tanka<%=i %> readonly></input>
</th>
<th><form action="KounyuHenshuServlet" method="post"><p>
<select name="afterNum" onchange=goukei() id=kosuu<%=i %>>
<option value=<%=k.getNum()%> selected><%=k.getNum()%></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select> </p>
</th>
<th><input type ="text" value=<%=k.getSprice()*k.getNum() %> id=kekka<%=i %> readonly></input></th>
|
|
