質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

36136閲覧

javascriptをjspに組み込む

yk-211

総合スコア34

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/06/29 05:47

こんにちは。
質問です。
下記の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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは

このコードのままだと 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

総合スコア3111

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yk-211

2015/06/29 06:28

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

2015/06/29 06:53

OKに変えることで出る不具合はどのようなものでしょうか? ちなみに、OKでなくてはならない理由はなにか制約があってのことでしょうか? (画面の仕様書で決められている、先に説明書ができあがってる、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

function kousin(){ var msg; if( document.form1.deleteFlag.checked ){ msg = "削除"; } else{ msg = "更新"; } // 「OK」時の処理開始 + 確認ダイアログの表示 if(window.confirm('本当に' + msg + 'してよろしいですか?')){ document.form1.action = "/Kadai/page/customerList.jsp"; return true; } // 「OK」時の処理終了 // cancel return false; }
yk-211

2015/06/29 10:43

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問