javascriptをjspに組み込む

顧客ID	\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t
顧客漢字名
顧客カナ名
性別	\r\n\t\t\t\t
身長	cm
体重	kg
生年月日	(yyyy/MM/ddで入力してください)
郵便番号	(ハイフン無しで入力してください)
住所
電話番号	(ハイフンありで入力してください)
削除

こんにちは。
質問です。
下記のJSPにjavascriptを組み込みました。
そこで1点問題が生じまして、1番下のほうの登録や更新のOKボタン
の部分で、どうしてもボタンの名称をOKに変更してしまうと処理に
不具合が生じてしまいます。何かいい方法がありませんでしょうか。
よろしくお願いいたします。

今は登録時がinsert、更新時がupdateにボタンの名称がなってしまっております。

lang
1<%@ page language="java" contentType="text/html; charset=EUC_JP"
2	pageEncoding="Windows-31J"%>
3<%@ taglib prefix="c" uri="/WEB-INF/tld/c.tld"%>
4<%@ taglib prefix="fn" uri="/WEB-INF/tld/fn.tld"%>
5<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
6<html>
7<head>
8<meta http-equiv="Content-Type" content="text/html; charset=EUC_JP">
9<c:import url="./head.jsp" />
10<link rel="stylesheet" type="text/css" href="../css/customerDetail.css">
11<script type="text/javascript" src="../js/dialog.js" charset="UTF-8">
12</script>
13<title>編集画面</title>
14<script type="text/javascript">
15
16
17function touroku(){
18
19	// 「OK」時の処理開始 ＋ 確認ダイアログの表示
20	if(window.confirm('本当に登録してよろしいですか？')){
21
22		location.href = "/Kadai/page/customerDetail.jsp";
23
24	}
25	// 「OK」時の処理終了
26
27	}
28
29function kousin(){
30
31	// 「OK」時の処理開始 ＋ 確認ダイアログの表示
32	if(window.confirm('本当に更新してよろしいですか？')){
33
34		location.href = "/Kadai/page/customerList.jsp";
35
36	}
37	// 「OK」時の処理終了
38
39	}
40
41function sakujyo(){
42
43	// 「OK」時の処理開始 ＋ 確認ダイアログの表示
44	if(window.confirm('本当に削除してよろしいですか？')){
45
46		location.href = "/Kadai/page/customerList.jsp";
47
48	}
49	// 「OK」時の処理終了
50
51	}
52
53</script>
54
55
56
57
58</head>
59<body>
60
61
62	<form action="./CustomerDetail" method="post">
63		<table>
64			<tr>
65				<th>顧客ID</th>
66				<td><c:choose>
67						<c:when test="${processType == 'insert'}">
68							<input type="text" name="id" size="12" value="${id}">
69						</c:when>
70						<c:otherwise>
71							<c:out value="${id}" />
72							<input type="hidden" name="id" value="${id}">
73						</c:otherwise>
74					</c:choose></td>
75			</tr>
76			<tr>
77				<th>顧客漢字名</th>
78				<td><input type="text" name="name" size="20" value="${name}"></td>
79			</tr>
80			<tr>
81				<th>顧客カナ名</th>
82				<td><input type="text" name="kana" size="20" value="${kana}"></td>
83			</tr>
84			<tr>
85				<th>性別</th>
86				<td><select name="gender">
87						<c:forEach var="generalDto" items="${genderList}" varStatus="status">
88							<c:choose>
89								<c:when test="${generalDto.detailCode == gender}">
90									<option value="${generalDto.detailCode}" selected><c:out value="${generalDto.contents1}" /></option>
91								</c:when>
92								<c:otherwise>
93									<option value="${generalDto.detailCode}"><c:out value="${generalDto.contents1}" /></option>
94								</c:otherwise>
95							</c:choose>
96						</c:forEach>
97					</select>
98				</td>
99			</tr>
100			<tr>
101				<th>身長</th>
102				<td><input type="text" name="height" size="12"
103					value="${height}">cm</td>
104			</tr>
105			<tr>
106				<th>体重</th>
107				<td><input type="text" name="weight" size="12"
108					value="${weight}">kg</td>
109			</tr>
110			<tr>
111				<th>生年月日</th>
112				<td><input type="text" name="birthday" size="12"
113					value="${birthday}">(yyyy/MM/ddで入力してください)</td>
114			</tr>
115			<tr>
116				<th>郵便番号</th>
117				<td><input type="text" name="zipCode" size="14"
118					value="${zipCode}">(ハイフン無しで入力してください)</td>
119			</tr>
120			<tr>
121				<th>住所</th>
122				<td><input type="text" name="address" size="40"
123					value="${address}"></td>
124			</tr>
125			<tr>
126				<th>電話番号</th>
127				<td><input type="text" name="phone" size="14" value="${phone}">(ハイフンありで入力してください)</td>
128			</tr>
129			<c:choose>
130				<c:when test="${processType == 'insert'}">
131				</c:when>
132				<c:otherwise>
133					<tr>
134						<th>削除</th>
135						<td><input type="checkbox" name="deleteFlag" size="12"
136							value="${1}"></td>
137					</tr>
138				</c:otherwise>
139			</c:choose>
140
141
142		</table>
143
144		<c:choose>
145			<c:when test="${processType == 'insert'}">
146				<input type="submit" name="processType" value="insert" onClick="touroku()"/>
147			</c:when>
148			<c:otherwise>
149				<input type="submit" name="processType" value="update" onClick="kousin()"/>
150			</c:otherwise>
151		</c:choose>
152		&nbsp; <input type="submit" value="一覧へ" name="backList" />
153	</form>
154</body>
155</html>

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは

このコードのままだと submit がキャンセルされないと思いますので
onclick の部分に次のように return を追記して

lang
1<input type="submit" name="processType" value="insert" onClick="return touroku()"/>
2<input type="submit" name="processType" value="update" onClick="return kousin()"/>

各関数には、下記のように return を追記する必要があると思います。

lang
1function touroku(){
2
3    // 「OK」時の処理開始 ＋ 確認ダイアログの表示
4    if(window.confirm('本当に登録してよろしいですか？')){
5
6        location.href = "/Kadai/page/customerDetail.jsp";
7
8        return true;
9    }
10    // 「OK」時の処理終了
11
12    // cancel
13    return false;
14}
15
16function kousin(){
17
18    // 「OK」時の処理開始 ＋ 確認ダイアログの表示
19    if(window.confirm('本当に更新してよろしいですか？')){
20
21       location.href = "/Kadai/page/customerList.jsp";
22
23        return true;
24    }
25    // 「OK」時の処理終了
26
27    // cancel
28    return false;
29}
30

このあたりの問題でしょうか？

投稿2015/06/29 06:15

takito

総合スコア3116

yk-211

2015/06/29 06:28

ありがとうございます。それも出来ておりませんでしたので、そちらの方法で修正が出来ました。質問にあるボタンの名称は、ボタンを「OK」と表示させたいのですが、登録時・更新時 insert,updateとボタンに表示されてしまっております。 value部分をOKに変えると不具合が出てしまいます。何かいい方法がありませんでしょうか。

takito

2015/06/29 06:53

ＯＫに変えることで出る不具合はどのようなものでしょうか？ちなみに、ＯＫでなくてはならない理由はなにか制約があってのことでしょうか？（画面の仕様書で決められている、先に説明書ができあがってる、etc）

yk-211

2015/06/29 06:55

ありがとうございます。 OKに変更すると、登録完了しましたとなるところが不正なアクセスとなります。仕様書で決められているため、OKの制約があります。説明不足で申し訳ございません。

takito

2015/06/29 07:40

ひょっとして、submit を受け付けて処理する過程で processType を評価する処理が無いでしょうか？そこで insert か update の文字列にマッチしなければうまく動かないようなコードになっていないでしょうか？

yk-211

2015/06/29 07:44

おそらく、 if (request.getParameter("processType") == null) { // 登録画面初期表示 return createInsertModoResult(); } else if (request.getParameter("processType").equals("disp")) { // 更新・削除初期表示 return this.doDispDetails(request, con); } else if (request.getParameter("processType").equals("update")) { // 登録処理 return this.doInsert(request, con); } else if (request.getParameter("processType").equals("insert")) { if (request.getParameter("deleteFlag") == null) { // 更新処理 return this.doUpdate(request, con); } else { // 削除処理 return this.doDelete(request, con); だと思いますが、どのように置き換えたらよろしいでしょうか。何度も申し訳ございません。

takito

2015/06/29 08:23

そのように分岐したいのであれば、submit ボタンの name に processType を指定するのと[OK]表示をかけもちさせるのは難しいですね。今までの経緯を踏まえて、全体的にこんな感じにしてみてはいかがでしょうか？ --- function touroku(){ // 「OK」時の処理開始＋確認ダイアログの表示 if(window.confirm('本当に登録してよろしいですか？')){ document.form1.action = "/Kadai/page/customerDetail.jsp"; return true; } // 「OK」時の処理終了 // cancel return false; } function kousin(){ // 「OK」時の処理開始＋確認ダイアログの表示 if(window.confirm('本当に更新してよろしいですか？')){ document.form1.action = "/Kadai/page/customerList.jsp"; return true; } // 「OK」時の処理終了 // cancel return false; } ・・・ <form action="./CustomerDetail" method="post" name="form1"> ・・・ <c:choose> <c:when test="${processType == 'insert'}"> <input type="text" name="processType" value="insert" style="display:none"> <input type="submit" value="OK" onClick="return touroku()"/> </c:when> <c:otherwise> <input type="text" name="processType" value="update" style="display:none"> <input type="submit" value="OK" onClick="return kousin()"/> </c:otherwise> </c:choose>

yk-211

2015/06/29 09:34

何度も大変ありがとうございます！そのようにしたところしっかり動作いたしました！ありがとうございます！

yk-211

2015/06/29 09:40

最後に聞きたいのですが、先ほどに追加で、削除処理を入れるとなるとどうなるでしょうか。deleteFlagにチェックが入って更新された場合に削除となるようにしているのですが、今の動作では更新してよろしいですか？→はい→削除しましたになり、データの削除が行われています。

takito

2015/06/29 10:19

削除の処理はうまくいっていて、チェックに応じて確認メッセージだけを変化したいのでしたら --- function kousin(){ var msg; if( document.form1.deleteFlag.checked ){ msg = "削除"; } else{ msg = "更新"; } // 「OK」時の処理開始＋確認ダイアログの表示 if(window.confirm('本当に' + msg + 'してよろしいですか？')){ location.href = "/Kadai/page/customerList.jsp"; return true; } // 「OK」時の処理終了 // cancel return false; }

takito

2015/06/29 10:21

あ、古いコードが混ざってしましました・・・ location.href = "/Kadai/page/customerList.jsp"; ↓ document.form1.action = "/Kadai/page/customerList.jsp"; でした。失礼しました。

yk-211

2015/06/29 10:36

ありがとうございます！表示はうまくいくようになりました。更新・削除の処理がうまくいかないようになり、更新しますか→はい　と押すと何もなく遷移するだけになっております。

takito

2015/06/29 10:43

yk-211

2015/06/29 10:43

location.href = "/Kadai/page/customerList.jsp"; の方を入力したところうまくいきました！大変ありがとうございます！

行動規範の内容に同意します