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

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

ただいまの
回答率

90.34%

  • JavaScript

    17514questions

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

  • MySQL

    6167questions

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

  • JSP

    959questions

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

  • servlet

    486questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 276

javabeginar

score 1

"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 />

```ツール:Eclipse

社内研修中の初心者です。
社内にJavaScriptに詳しい人がいないのでお聞きします。

現在JSPとサーブレットを使い、MySQLのデータから社員を検索して編集するシステムを作っています。
入力フォームに入力し、検索ボタンを押してMySQLから取り出した値をテーブル表示しています。

正常に動いていたのですが、仕様が変更になりました。
入力した値を一度画面に出力(確認ボタンを押すと出力)して、その出力した値から検索することになりました。

JavaScriptを使って画面に出力することは出来たのですが、検索ボタンを押しても値が取り出せません。
ソースが間違っているのか、JSPにJavaScriptを入れると正確に動作しないのでしょうか。
よろしくお願いいたします。

追記
17:32 最新のコードを載せました。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • javabeginar

    2018/06/21 17:22

    もとのformも一緒です。

    キャンセル

  • mts10806

    2018/06/21 17:27

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

    キャンセル

  • javabeginar

    2018/06/21 17:34

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

    キャンセル

回答 1

checkベストアンサー

+2

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

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

<!-- 不可視の場合 -->
<input type="hidden" id="s1" name="nam" />
<input type="hidden" id="s2" name="namae" />
<input type="hidden" id="s3" name="mail" />
<input type="hidden" id="s4" name="depart" />
<input type="hidden" id="s5" name="title" />
function fncDisp()
{
  label1.innerHTML = document.f.nam.value;
  label2.innerHTML = document.f.namae.value;
  label3.innerHTML = document.f.mail.value;

  // 追加。
  document.getElementById('s1').value = document.f.nam.value;
  // (略)
}

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

function FormSubmit() {
  var target = document.getElementById("search");
  target.elements["nam"].value = document.getElementsByName("nam")[0].value
  target.elements["namae"].value = document.getElementsByName("namae")[0].value
  target.elements["mail"].value= document.getElementsByName("mail")[0].value
  target.elements["depart"].value = document.getElementsByName("depart")[0].value
  target.elements["title"].value = document.getElementsByName("title")[0].value
  target.submit();
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/21 13:45

    name="search" を検索ボタンに追加しましたが送信されませんでした。
    <input name="search" class="btn btn-success center-block" value="検索" onClick="FormSubmit();" />

    おっしゃっていることはこういうことでしょうか。

    キャンセル

  • 2018/06/21 13:49

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

    キャンセル

  • 2018/06/21 14:06

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

    キャンセル

  • 2018/06/21 14: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>

    キャンセル

  • 2018/06/21 14:09

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

    キャンセル

  • 2018/06/21 14:35

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

    キャンセル

  • 2018/06/21 14:48

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

    キャンセル

  • 2018/06/21 14:54

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

    キャンセル

  • 2018/06/21 15:38

    ああ、もしかしてこの行でhiddenに入れようとしていたのでしょうか?
    document.getElementsByName("nam")[0].value = document.getElementsByName("nam")[0].value

    fncDisp()ではなく、こっちの代入先を直したほうがいいかもしれません。

    キャンセル

  • 2018/06/21 15: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();
    }

    キャンセル

  • 2018/06/21 18:04

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

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    17514questions

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

  • MySQL

    6167questions

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

  • JSP

    959questions

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

  • servlet

    486questions

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