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

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

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

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

JSP

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

JavaScript

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

servlet

Servletとは、Webページの動的な生成やデータ処理などをサーバ上で実行するために、Javaで作成されたプログラムです。 ショッピングサイトやオンラインバンキングといった、動的なウェブサイトの構築に用いられています。

Q&A

解決済

1回答

5432閲覧

JSP内のJSによる検索機能について

javabeginar

総合スコア13

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

JSP

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

JavaScript

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

servlet

Servletとは、Webページの動的な生成やデータ処理などをサーバ上で実行するために、Javaで作成されたプログラムです。 ショッピングサイトやオンラインバンキングといった、動的なウェブサイトの構築に用いられています。

0グッド

0クリップ

投稿2018/06/21 04:10

編集2018/06/21 08:34

"HTML" "JavaScript"

コード <Script> <!-- function fncDisp() { label1.innerHTML = document.f.nam.value; label2.innerHTML = document.f.namae.value; label3.innerHTML = document.f.mail.value; } function shwSelect() { //セレクトボックスの値(数値)を取得 var num = document.f.depart.selectedIndex; // 値(value値)を取得 var str = document.f.depart.options[num].value; document.getElementById("label4").innerHTML = str; //セレクトボックスの値(数値)を取得 var num = document.f.title.selectedIndex; // 値(value値)を取得 var str = document.f.title.options[num].value; document.getElementById("label5").innerHTML = str; } function FormSubmit() { var target = document.getElementById("search"); // 追加。 document.getElementById('s1').value = document.f.nam.value; document.getElementById('s2').value = document.f.namae.value; document.getElementById('s3').value = document.f.mail.value; document.getElementById('s4').value = document.f.depart.value; document.getElementById('s5').value = document.f.title.value; target.method = "post"; target.submit(); } function FormExport() { var target = document.getElementById("export"); document.getElementsByName("nam")[0].value = document.getElementsByName("nam")[0].value document.getElementsByName("namae")[0].value = document.getElementsByName("namae")[0].value document.getElementsByName("mail")[0].value = document.getElementsByName("mail")[0].value document.getElementsByName("depart")[0].value = document.getElementsByName("depart")[0].value document.getElementsByName("title")[0].value = document.getElementsByName("title")[0].value target.method = "post"; target.submit(); } --> </Script> <title>社員管理システム</title> </head> <body> <jsp:include page="nav1.jsp" /> <form name="f" action=""> <div class="containers"> <table class="table"> <tr> <th>従業員名</th> <td> <span id="label1"></span> <input type="text" name="nam" value="<c:out value="${dto.nam}" />" maxlength="128" size="60"/></td> </tr> <tr> <th>従業員名(フリガナ)</th> <td> <span id="label2"></span> <input type="text" name="namae" value="<c:out value="${dto.namae}" />" maxlength="128" size="60"/></td> </tr> <tr> <th>メールアドレス</th> <td><span id="label3"></span> <input type="text" name="mail" value="<c:out value="${dto.mail}" />" maxlength="128" size="60"/></td> </tr> <tr> <th>部署</th> <td><span id="label4"></span> <select name="depart"> <option value="">選択してください</option> <option value="システム事業部">システム事業部</option> <option value="活用事業部">活用事業部</option> <option value="営業部">営業部</option> <option value="役員">役員</option> </select> </td> </tr> <tr> <th>役職</th> <td><span id="label5"></span> <select name="title"> <option value="">選択してください</option> <option value="CEO">CEO</option> <option value="COO">COO</option> <option value="CTO">CTO</option> <option value="部長">部長</option> <option value="係長">係長</option> <option value="主任">主任</option> </select> </td> </tr> </table> </div>   <input type="button" name="btn" value="確認" onClick="fncDisp(), shwSelect()"> </form> <form id="search" action="search" method="POST"> <input type="hidden" id="s1" name="label1" /> <input type="hidden" id="s2" name="label2" /> <input type="hidden" id="s3" name="label3" /> <input type="hidden" id="s4" name="label4" /> <input type="hidden" id="s5" name="label5" /> <input class="btn btn-success center-block" name="search" value="検索" onClick="FormSubmit();" /> </form> <br />
社内研修中の初心者です。 社内にJavaScriptに詳しい人がいないのでお聞きします。 現在JSPとサーブレットを使い、MySQLのデータから社員を検索して編集するシステムを作っています。 入力フォームに入力し、検索ボタンを押してMySQLから取り出した値をテーブル表示しています。 正常に動いていたのですが、仕様が変更になりました。 入力した値を一度画面に出力(確認ボタンを押すと出力)して、その出力した値から検索することになりました。 JavaScriptを使って画面に出力することは出来たのですが、検索ボタンを押しても値が取り出せません。 ソースが間違っているのか、JSPにJavaScriptを入れると正確に動作しないのでしょうか。 よろしくお願いいたします。 追記 17:32 最新のコードを載せました。

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

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

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

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

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

m.ts10806

2018/06/21 04:12

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入(エラーメッセージの場合は不要)の手順で「コードハイライト化」してください。(質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください)
m.ts10806

2018/06/21 04:13

(もしかしたら意図してそうしているかもしれませんが、ユーザ名、正しくは beginner ですね >beginar )
javabeginar

2018/06/21 09:05 編集

ただいま修正しました。スペルの件は知っています。beginnerだと既に使用されていますし、usernameはあえて変えたりするものですよね。ご親切にどうも。
m.ts10806

2018/06/21 04:21

コードのみ囲ってもらえれば良かったのですが。見方調整のために「(質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください)」という注意書きも入れています。
m.ts10806

2018/06/21 04:24

一応、間違いなく出来そうな手順を提示したつもりでしたが、どこか分かりづらい箇所があったのでしょうか?
退会済みユーザー

退会済みユーザー

2018/06/21 05:38

ソースを見る限り、JavaScriptでやる必要のないコードにお見受けしますが、何か意図はあるのでしょうか?
javabeginar

2018/06/21 05:39

これはテラテイルの中でのコード、ということですか。それとも、そもそものコードの話でしょうか。
退会済みユーザー

退会済みユーザー

2018/06/21 05:41

そもそものコードは私は見ることができませんので、提示されたコードの話です。
javabeginar

2018/06/21 05:44 編集

>Kosuke_Shibuya <form>タグの中にある入力フォームを確認ボタンで使っているので、その値を使用し検索もしたいです。hiddenを使い検索に値を飛ばすにはJavaScriptだとお聞きしたので使っていました。ほかにスタンダードな方法があればぜひご教授をお願いします。
javabeginar

2018/06/21 05:48 編集

>Kosuke_Shibuya 2018/06/21 14:41 そもそものコードは私は見ることができませんので、提示されたコードの話です。 すみません、これはmts10806さんへの質問でした。ブロックを分けるというのは、テラテイル内で見やすくしてほしいとのことか、コードを入力するときにブロックを分けると見やすい、ということなのかの疑問です。
m.ts10806

2018/06/21 05:51

テラテイル内で見やすくしてほしい です。コードブロック冒頭を ```html とすれば多少はマシになるかもしれませんが。なのでそもそもですが「コード」という実際のコードにないであろう記述は不要です。
x_x

2018/06/21 06:19

現状では確認ボタンを押すことなく検索ボタンが押せるのですが、その辺の要件はどうなっているのでしょうか?
javabeginar

2018/06/21 06:32

その辺は特に指示されていないので、まずは言われた通りに作ります。その後に機能を足そうと思います。
x_x

2018/06/21 07:00

もともとのformも、action="search" method="POST" だったのでしょうか?
javabeginar

2018/06/21 07:23

searchのサーブレットがあるのでそちらへ飛ぶようになっています。
x_x

2018/06/21 07:34

ええと、これが一致しないと受け取れないので聞いています。
javabeginar

2018/06/21 08:22

もとのformも一緒です。
m.ts10806

2018/06/21 08:27

現在の最新のコードを提示された方が良いです。
javabeginar

2018/06/21 08:34

現在のコードに更新しました。
guest

回答1

0

ベストアンサー

name属性がなければ送信されません。送りたいものにはつけるようにしてください。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input

-- 14:46 修正箇所追記
idの重複を避け、name属性をつける。typeも直す。

HTML

1<!-- 不可視の場合 --> 2<input type="hidden" id="s1" name="nam" /> 3<input type="hidden" id="s2" name="namae" /> 4<input type="hidden" id="s3" name="mail" /> 5<input type="hidden" id="s4" name="depart" /> 6<input type="hidden" id="s5" name="title" />

JavaScript

1function fncDisp() 2{ 3 label1.innerHTML = document.f.nam.value; 4 label2.innerHTML = document.f.namae.value; 5 label3.innerHTML = document.f.mail.value; 6 7 // 追加。 8 document.getElementById('s1').value = document.f.nam.value; 9 // (略) 10}

-- 15:44 追記。fncDisp()ではなく、FormSubmit()のほうを修正。

JavaScript

1function FormSubmit() { 2 var target = document.getElementById("search"); 3 target.elements["nam"].value = document.getElementsByName("nam")[0].value 4 target.elements["namae"].value = document.getElementsByName("namae")[0].value 5 target.elements["mail"].value= document.getElementsByName("mail")[0].value 6 target.elements["depart"].value = document.getElementsByName("depart")[0].value 7 target.elements["title"].value = document.getElementsByName("title")[0].value 8 target.submit(); 9}

投稿2018/06/21 04:17

編集2018/06/21 06:45
x_x

総合スコア13749

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

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

javabeginar

2018/06/21 04:45

name="search" を検索ボタンに追加しましたが送信されませんでした。 <input name="search" class="btn btn-success center-block" value="検索" onClick="FormSubmit();" /> おっしゃっていることはこういうことでしょうか。
x_x

2018/06/21 04:49

送りたいものはlabel1~label5ではないでしょうか?
javabeginar

2018/06/21 05:06

そうです。 <span>にnameを入れてしまうと属性名が未定義です、とエラーが出てしまいます。
javabeginar

2018/06/21 05:07

検索のFormをこのように記述しましたが、これも作動しません。 <form id="search" action="search" method="POST"> <input type="hidden" name="label1" type="text" /> <input type="hidden" name="label2" type="text" /> <input type="hidden" name="label3" type="text" /> <input type="hidden" name="label4" type="text" /> <input type="hidden" name="label5" type="text" /> <input class="btn btn-success center-block" name="search" value="検索" onClick="FormSubmit();" /> </form>
x_x

2018/06/21 05:09

inputですよね? なぜspan……と思いましたが、idが重複してるんですね。 idの重複は許されないので、変更してください。
javabeginar

2018/06/21 05:35

大変恐縮ですが、本当にどうしたらいいのかわからないので、どこをどう変更すれば良いのか具体的にご教示願いませんでしょうか。
x_x

2018/06/21 05:48

よく見るとtype属性も重複してますね……hiddenでいいのでしょうか? 追記します
x_x

2018/06/21 05:54

追記しました。 見えているものを送っていると思っていたので、値がとれているかどうかまでは確認していません。
x_x

2018/06/21 06:38

ああ、もしかしてこの行でhiddenに入れようとしていたのでしょうか? document.getElementsByName("nam")[0].value = document.getElementsByName("nam")[0].value fncDisp()ではなく、こっちの代入先を直したほうがいいかもしれません。
javabeginar

2018/06/21 06:53

はい。下記のように修正しました。 まだ検索がかけられないので他に原因があるか探してみます。 ありがとうございました。 function fncDisp() { label1.innerHTML = document.f.nam.value; label2.innerHTML = document.f.namae.value; label3.innerHTML = document.f.mail.value; } function FormSubmit() { var target = document.getElementById("search"); // 追加。 document.getElementById('s1').value = document.f.nam.value; document.getElementById('s2').value = document.f.namae.value; document.getElementById('s3').value = document.f.mail.value; document.getElementById('s4').value = document.f.depart.value; document.getElementById('s5').value = document.f.title.value; target.method = "post"; target.submit(); }
javabeginar

2018/06/21 09:04

先ほど記載したコードで間違いなかったです。 サーブレット側に問題がありました。 request.getParameter("label1")にすると無事反映されました。 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問