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

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

ただいまの
回答率

89.07%

一覧で「チェックされた行の値の受け渡し」と「各行のリンクにsubmitで遷移」の両立

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,602

mona

score 30

前提・実現したいこと

JavaのWebアプリで勤怠システムを開発しています。
各社員が勤務時間や休暇を登録し、管理者が報告書をエクスポートしてチェックする機能で
社員を検索して一覧表示しています。
「一覧」のリンクでは、各社員の勤務時間一覧画面に遷移します。
「報告書」にチェックを入れて「エクスポート」ボタンを押すと
選択された社員の報告書がダウンロードできる画面です。

発生している問題・エラーメッセージ

「報告書」にチェックを入れて「エクスポート」ボタンを押すと
選択された社員の報告書がダウンロードできる

選択された社員を取得するのに、JavaScriptを使っています。
submitEmpList()で、checkFormにチェックボックスの要素を生成して
addChildでcheckFormに子要素として追加し、ReportOutputサーブレットに渡す
という部分で要素の追加ができません。

「一覧」のリンクでは、各社員の勤務時間一覧画面に遷移

これはできています。
社員番号をURLに付与してGETするのではなく、
社員番号をそれぞれsendFormという名前のformのhidden項目として
WorkListサーブレットにPOSTしています。
(他の機能から一覧画面が呼び出されたときにPOSTで社員番号を受け取っているため、
GETで渡すようには変更できません)

最初は一覧のリンクがなく、tableをformタグで囲って
サーブレット側でgetParameterValues("select")で
チェックボックスの値を取得していましたが、
一覧のリンクで各社員の一覧画面へ遷移させるために
sendFormを追加したところformが入れ子になったため上手く動かなくなってしまいました。

そこで、チェックボックス要素を含まないcheckFormを別で作り、
JavaScriptでチェックボックスを取得してcheckFormに追加
という処理に変更したのですが要素が追加できておらずsubmitもできません。

該当のソースコード

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf8">
    <meta name="description" content="報告書検索結果" />
    <title>勤務時間報告書</title>
</head>
<body>
    <div class="l-main">
        <div class="main">

<!-- 検索結果画面 -->
            <div class="box">
            <h1>社員検索結果</h1>
            <table id="empList" class="">
             <tr>
              <th nowrap class="center">社員番号</th>
              <th nowrap class="center">社員名</th>
              <th nowrap class="center">社員名ふりがな</th>
              <th nowrap class="center">所属名</th>
              <th nowrap class="center">一覧</th>
              <th nowrap class="center">報告書</th>
             </tr>
             <% ArrayList<EmpSearchBean> emplist = (ArrayList<EmpSearchBean>)request.getAttribute("emplist");%>
             <% for(int i=0; i< emplist.size(); i++){%>
             <tr>
              <form name="sendForm" action="" method="post">
                <input type=hidden name="target_emp" value="<%= emplist.get(i).getEmpId() %>">
              </form>
              <td nowrap class="center"><%= emplist.get(i).getEmpId() %></td>
              <td nowrap class="center"><%= emplist.get(i).getEmpName() %></td>
              <td nowrap class="center"><%= emplist.get(i).getKana() %></td>
              <td nowrap class="center"><%= emplist.get(i).getSectionname() %></td>
              <td nowrap class="center"><a href="javascript:void(0);" onClick = "javascript:send('WorkList?month=2016-10',<%=i%>);">一覧</a></td>
              <td nowrap class="center">
                <input type="checkbox"    name="select" value="<%= emplist.get(i).getEmpId() %>" checked/>
              </td>
              </tr>
             <%    }%>

            </table>

            <form name="checkForm" action="ReportOutput" method="post">

            <div class="submit">
                <input type="button" onclick="chkAll_form(false)" value="全解除">
                <input type="button" onclick="chkAll_form(true)" value="全選択">
                <input type="button" onclick="submitEmpList" value="エクスポート">
            </div>
             </form>
            <!-- .main -->
        </div>
        <!-- .l-main -->
    </div>
</body>
</html>
function send(url,no)
{
    var forms = document.getElementsByName('sendForm') ;
    var form = forms[no];
    form.action = url;
    form.submit();
    return false;
}

function submitEmpList(){
    // フォームを取得
    var form = document.getElementsByName('checkForm');

    // チェックボックスを配列で取得
    var el=document.getElementsByName('select');

    for(var i=0; i<el.length; i++) {
        if(el[i].type=="checkbox" && el[i].checked==true){
            // エレメントを作成
            var ele = document.createElement('input');
            // データを設定
            ele.setAttribute('type', 'checkbox');
            ele.setAttribute('name', 'select');
            ele.setAttribute('value', el[i].value);
            // 要素を追加
            form.appendChild(ele);
        }
    }
    form.submit();

    return false;
}

function chkAll_form(bool) {
    var el=document.getElementsByName('select');
    for(var i=0; i<el.length; i++) {
        if(el[i].type=='checkbox'){
            el[i].checked=bool;
        }
    }
}

試したこと

要素を追加できるか下記のようなコードに書き換えて
canAddChildrenで確認したところ
「子要素を追加できません」のアラートが表示されてしまいました。

function submitEmpList(){
    // フォームを取得
    var form = document.getElementsByName('checkForm');

    if(form.canAddChildren == false){
        alert('子要素を追加できません');
    }    
    return false;
}

formには子要素は追加できないのでしょうか?

子要素として値を追加して、サーブレットに送る方法があればご教授願います。

補足情報(言語/FW/ツール等のバージョンなど)

JDK1.6
Tomcat7.0.25
ブラウザ Google Chrome バージョン53.0.2785.143
FireFox バージョン47.0.1
※フレームワークは使用しておりません

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

フォームへの追加はできますが、ポストするパラメータを加えるのには
手っ取り早く、hiddenのinputタグを適当に作るのがやさしいかと。

/**

  • 隠しパラメータを設定する
    */
    function setParameter(form, name, value) {
    var q = document.createElement('input');
    q.type = 'hidden';
    q.id = name;
    q.name = name;
    q.value = value;
    form.appendChild(q);
    }

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/29 16:57

    回答を参考にcheckbox⇒hiddenに変更すると送ることができました。
    今見ると、canAddChildrenがfalseになるのはgetElementsByNameの戻り値がHTMLCollectionだからですね。。

    回答ありがとうございました!

    キャンセル

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

  • ただいまの回答率 89.07%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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