- 締切済み
jspファイルで注文フォームの合計金額の計算をした
ショッピングサイトの注文確認画面で商品の個数を変更し、合計金額をページの更新なしに変更して表示するようなページを作りたいのですが、 下記のソースの用にして作るとidが被ってしまい二個目の商品以降が計算できず困っています。 formやinputタグもfor文で回して作っているのでid名も同様になってしまうことが問題だと思うのですが、うまい方法が思いつかず困っています。 どなたかアドバイス頂ければと思います。 javascriptの質問板で書いたほうが良いのかとも思ったのですが、jspファイルなのでjava板で質問させて頂きました。 ソースは下記です。 --------------------------------------------------------------------------------- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.io.IOException,java.io.PrintWriter,java.sql.Connection,java.sql.DriverManager,java.sql.ResultSet,java.sql.SQLException,java.sql.Statement,java.util.ArrayList,javax.servlet.RequestDispatcher,javax.servlet.ServletException,javax.servlet.annotation.WebServlet,javax.servlet.http.HttpServlet,javax.servlet.http.HttpServletRequest,javax.servlet.http.HttpServletResponse,javax.servlet.http.HttpSession,record.KounyuMeisai"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ショッピングカート</title> </head> <body> <% //セッションから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").value=document.getElementById("tanka").value *document.getElementById("kosuu").value; } </script> <tr> <th><%=kou%></th> <th><%=k.getSname()%></th> <th><%=k.getSkind()%></th> <th><input type="text" value =<%=k.getSprice()%> id="tanka" readonly></input> </th> <th><form action="KounyuHenshuServlet" method="post"> <p> <select name="afterNum" onchange=goukei() id=kosuu> <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" readonly></input></th> <th><input type=hidden name=AlistNum value=<%=i%> > <input type="submit" name="button" value="変更"> <input type="submit" name="button" value="削除"> </form></th> </tr> <% soukei += k.getNum() * k.getSprice(); kou++; } i++; } //セッションにアレイリストを入れる。 session.setAttribute("KounyuList", KounyuList); %> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th>総計</th> <th><%=soukei%></th> </tr> </table> <a href="kounyuInput.jsp">買い物を続ける</a> <br> </body> </html>
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- javavavasuteki
- ベストアンサー率100% (2/2)
方法はいくらでもあると思いますが この1個だけ見たときに最も単純で修正の労が少ないであろう方法を提案しますね まず、ループ中のid指定はやめた方がいいです idはHTMLドキュメント中で一意であるべきです なのでidでは無くnameにしましょう使いましょう(afterNumはそのままで) 次に、html中の呼び出し箇所では実引数をthisとします <select name="afterNum" onchange="goukei(this)">の様にします 次に、jsのgoukeiメソッドを変更します まず仮引数を設定してgoukei(obj)の様にします そして内部の実装は、渡された引数から自身の属するformを特定し 計算用の各項目をformからの相対で取得して計算するようにします テスト用コードですがこんな風になります function goukei(obj) { var goukei = 0; var form = obj.form; if (form) { var tanka = form.tanka; var afterNum = form.afterNum; if (tanka && afterNum) { goukei += eval(tanka.value) * eval(afterNum.value); alert(goukei); } } }
