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

###前提・実現したいこと
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もできません。

###該当のソースコード

JSP
1<%@ page language="java" contentType="text/html; charset=UTF-8"
2	pageEncoding="UTF-8"%>
3<%@ page import="java.util.*"%>
4
5<!DOCTYPE html>
6<html lang="ja">
7<head>
8	<meta charset="utf8">
9	<meta name="description" content="報告書検索結果" />
10	<title>勤務時間報告書</title>
11</head>
12<body>
13	<div class="l-main">
14		<div class="main">
15
16<!-- 検索結果画面 -->
17			<div class="box">
18			<h1>社員検索結果</h1>
19			<table id="empList" class="">
20			 <tr>
21			  <th nowrap class="center">社員番号</th>
22			  <th nowrap class="center">社員名</th>
23			  <th nowrap class="center">社員名ふりがな</th>
24			  <th nowrap class="center">所属名</th>
25			  <th nowrap class="center">一覧</th>
26			  <th nowrap class="center">報告書</th>
27			 </tr>
28			 <% ArrayList<EmpSearchBean> emplist = (ArrayList<EmpSearchBean>)request.getAttribute("emplist");%>
29			 <% for(int i=0; i< emplist.size(); i++){%>
30			 <tr>
31			  <form name="sendForm" action="" method="post">
32				<input type=hidden name="target_emp" value="<%= emplist.get(i).getEmpId() %>">
33			  </form>
34			  <td nowrap class="center"><%= emplist.get(i).getEmpId() %></td>
35			  <td nowrap class="center"><%= emplist.get(i).getEmpName() %></td>
36			  <td nowrap class="center"><%= emplist.get(i).getKana() %></td>
37			  <td nowrap class="center"><%= emplist.get(i).getSectionname() %></td>
38			  <td nowrap class="center"><a href="javascript:void(0);" onClick = "javascript:send('WorkList?month=2016-10',<%=i%>);">一覧</a></td>
39			  <td nowrap class="center">
40				<input type="checkbox"	name="select" value="<%= emplist.get(i).getEmpId() %>" checked/>
41			  </td>
42			  </tr>
43			 <%	}%>
44
45			</table>
46
47			<form name="checkForm" action="ReportOutput" method="post">
48
49			<div class="submit">
50				<input type="button" onclick="chkAll_form(false)" value="全解除">
51				<input type="button" onclick="chkAll_form(true)" value="全選択">
52				<input type="button" onclick="submitEmpList" value="エクスポート">
53			</div>
54		 	</form>
55			<!-- .main -->
56		</div>
57		<!-- .l-main -->
58	</div>
59</body>
60</html>

JavaScript
1function send(url,no)
2{
3	var forms = document.getElementsByName('sendForm') ;
4	var form = forms[no];
5	form.action = url;
6	form.submit();
7	return false;
8}
9
10function submitEmpList(){
11	// フォームを取得
12	var form = document.getElementsByName('checkForm');
13	
14	// チェックボックスを配列で取得
15	var el=document.getElementsByName('select');
16	
17	for(var i=0; i<el.length; i++) {
18		if(el[i].type=="checkbox" && el[i].checked==true){
19			// エレメントを作成
20			var ele = document.createElement('input');
21			// データを設定
22			ele.setAttribute('type', 'checkbox');
23			ele.setAttribute('name', 'select');
24			ele.setAttribute('value', el[i].value);
25			// 要素を追加
26			form.appendChild(ele);
27		}
28	}
29	form.submit();
30	
31	return false;
32}
33
34function chkAll_form(bool) {
35	var el=document.getElementsByName('select');
36	for(var i=0; i<el.length; i++) {
37		if(el[i].type=='checkbox'){
38			el[i].checked=bool;
39		}
40	}
41}

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

JavaScript
1function submitEmpList(){
2	// フォームを取得
3	var form = document.getElementsByName('checkForm');
4	
5	if(form.canAddChildren == false){
6		alert('子要素を追加できません');
7	}	
8	return false;
9}

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

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

###補足情報(言語/FW/ツール等のバージョンなど)
JDK1.6
Tomcat7.0.25
ブラウザ Google Chrome バージョン53.0.2785.143
FireFox バージョン47.0.1
※フレームワークは使用しておりません

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

回答1件

ベストアンサー

フォームへの追加はできますが、ポストするパラメータを加えるのには
手っ取り早く、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);
}