プロが教えるわが家の防犯対策術！

jspファイルで注文フォームの合計金額の計算をした

締切済

  • 質問者：unmarko
  • 質問日時：
  • 回答数：1件

ショッピングサイトの注文確認画面で商品の個数を変更し、合計金額をページの更新なしに変更して表示するようなページを作りたいのですが、
下記のソースの用にして作ると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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1

方法はいくらでもあると思いますが


この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);
}
}
}
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報