JS チェックボックスのデータ送信

前提・実現したいこと

JSでチェックボックスを作成し、選択した項目の情報を遷移先のページで表示する
（選択したチェックボックスを基にランダムで席順を決めるプログラム）

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

遷移先にチェックボックスのデータが反映されない

該当のソースコード

JavaScript
1＜＜遷移前＞＞
2function checkAllMs()
3{
4    var allms = document.formMs.allms.checked;
5    for ( var v = 0; v < document.formMs.m.length; v++ )
6    {
7        document.formMs.m[v].checked = allms;
8    }
9}
10
11function disCheckAllMs()
12{
13    var checks = document.formMs.m;
14    var checksCount = 0;
15    for ( var v = 0; v < checks.length; v++ )
16    {
17        if ( checks[v].checked == false )
18        {
19            document.formMs.allms.checked = false;
20        } else
21        {
22            checksCount += 1;
23            if ( checksCount == checks.length )
24            {
25                document.formMs.allms.checked = true;
26            }
27        }
28    }
29}
30
31function checkAll4()
32{
33    var all4 = document.form4.all4.checked;
34    for ( var v = 0; v < document.form4.m4.length; v++ )
35    {
36        document.form4.m4[v].checked = all4;
37    }
38}
39
40function disCheck4()
41{
42    var checks = document.form4.m4;
43    var checksCount = 0;
44    for ( var v = 0; v < checks.length; v++ )
45    {
46        if ( checks[v].checked == false )
47        {
48            document.form4.all4.checked = false;
49        } else
50        {
51            checksCount += 1;
52            if ( checksCount == checks.length )
53            {
54                document.form4.all4.checked = true;
55            }
56        }
57    }
58}
59
60function checkAll5()
61{
62    var all5 = document.form5.all5.checked;
63    for ( var v = 0; v < document.form5.m5.length; v++ )
64    {
65        document.form5.m5[v].checked = all5;
66    }
67}
68
69function disCheck5()
70{
71    var checks = document.form5.m5;
72    var checksCount = 0;
73    for ( var v = 0; v < checks.length; v++ )
74    {
75        if ( checks[v].checked == false )
76        {
77            document.form5.all5.checked = false;
78        } else
79        {
80            checksCount += 1;
81            if ( checksCount == checks.length )
82            {
83                document.form5.all5.checked = true;
84            }
85        }
86    }
87}
88
89function checkAll6()
90{
91    var all6 = document.form6.all6.checked;
92    for ( var v = 0; v < document.form6.m6.length; v++ )
93    {
94        document.form6.m6[v].checked = all6;
95    }
96}
97
98function disCheck6()
99{
100    var checks = document.form6.m6;
101    var checksCount = 0;
102    for ( var v = 0; v < checks.length; v++ )
103    {
104        if ( checks[v].checked == false )
105        {
106            document.form6.all6.checked = false;
107        } else
108        {
109            checksCount += 1;
110            if ( checksCount == checks.length )
111            {
112                document.form6.all6.checked = true;
113            }
114        }
115    }
116}
117

JavaScript
1＜＜遷移後＞＞
2window.onload = function random()
3{
4    var list;
5    var ms = document.formMs.m;
6    var m4 = document.form4.m4;
7    var m5 = document.form5.m5;
8    var m6 = document.form6.m6;
9
10    for ( var v = 0; v < ms.length; v++ )
11    {
12        if ( ms[v].checked )
13        {
14            list.push( ms[v]);
15        }
16    }
17
18    for ( var v = 0; v < m4.length; v++ )
19    {
20        if ( m4[v].checked )
21        {
22            list.push( m4[v]);
23        }
24    }
25
26    for ( var v = 0; v < m5.length; v++ )
27    {
28        if ( m5[v].checked )
29        {
30            list.push( m5[v]);
31        }
32    }
33
34    for ( var v = 0; v < m6.length; v++ )
35    {
36        if ( m6[v].checked )
37        {
38            list.push( m6[v]);
39        }
40    }
41
42    var sheetNum = Array( list.length );
43
44    for ( var v = 0; v < sheetNum.length; v++ )
45    {
46        push(sheetNum, Math.floor( Math.random() * sheetNum.length ));
47    }
48
49    var sheets = new Array();
50    for(var v = 0; v < sheetNum.length; v++){
51        sheets["s" + sheetNum[v]]=list[v];
52    }
53
54    for(var key in sheets){
55        document.getElementById(key).innerText = sheet[key];
56    }
57}
58
59function push(array,value){
60    while(true){
61        if (array.indexOf(value) == -1){
62            array.push(value);
63        }else{
64            value = Math.floor(Math.random() * array.length);
65            continue;
66        }
67        break;
68    }
69	return true;
70}

HTML
1＜＜遷移前＞＞
2<!DOCTYPE html>
3<html>
4
5    <head>
6        <script type="text/javascript" src="random.js"></script>
7        <script type="text/javascript" src="result.js"></script>
8        <link rel="stylesheet" href="random.css" type="text/css">
9    </head>
10
11    <body>
12        <h1 id="Title">参加者を選択して下さい</h1>
13        <div id="allCheckbox">
14            <form name="formMs" class="checkbox">
15                <div id="managers">
16                    <p name="title">AAA</p>
17                    <input type="checkbox" name="allms" value="allms" onclick="checkAllMs();">全員<br>
18                    <input type="checkbox" name="m" value="AAA1" onclick="disCheckAllMs();">AAA1<br>
19                    <input type="checkbox" name="m" value="AAA2" onclick="disCheckAllMs();">AAA2
20                </div>
21            </form>
22
23            <form name="form4" class="checkbox">
24                <div id="m4">
25                    <p name="title">BBB</p>
26                    <input type="checkbox" name="all4" value="all4" onclick="checkAll4();">全員<br>
27                    <input type="checkbox" name="m4" value="BBB1" onclick="disCheck4();">BBB1<br>
28                    <input type="checkbox" name="m4" value="BBB2" onclick="disCheck4();">BBB2<br>
29                    <input type="checkbox" name="m4" value="BBB3" onclick="disCheck4();">BBB3<br>
30                    <input type="checkbox" name="m4" value="BBB4" onclick="disCheck4();">BBB4<br>
31                    <input type="checkbox" name="m4" value="BBB5" onclick="disCheck4();">BBB5<br>
32                    <input type="checkbox" name="m4" value="BBB6" onclick="disCheck4();">BBB6
33                </div>
34            </form>
35
36            <form name="form5" class="checkbox">
37                <div id="m5">
38                    <p name="title">CCC</p>
39                    <input type="checkbox" name="all5" value="all5" onclick="checkAll5();">全員<br>
40                    <input type="checkbox" name="m5" value="CCC1" onclick="disCheck5();">CCC1<br>
41                    <input type="checkbox" name="m5" value="CCC2" onclick="disCheck5();">CCC2<br>
42                    <input type="checkbox" name="m5" value="CCC3" onclick="disCheck5();">CCC3<br>
43                    <input type="checkbox" name="m5" value="CCC4" onclick="disCheck5();">CCC4
44                </div>
45            </form>
46
47            <form name="form6" class="checkbox">
48                <div id="m6">
49                    <p name="title">DDD</p>
50                    <input type="checkbox" name="all6" value="all6" onclick="checkAll6();">全員<br>
51                    <input type="checkbox" name="m6" value="DDD1" onclick="disCheck6();">DDD1<br>
52                    <input type="checkbox" name="m6" value="DDD2" onclick="disCheck6();">DDD2<br>
53                    <input type="checkbox" name="m6" value="DDD3" onclick="disCheck6();">DDD3
54                </div>
55            </form>
56        </div>
57
58        <div id="button">
59            <form name="getSheets" >
60                <input type="submit" value="席を決める" id="sheetButton" onclick="random();">
61            </form>
62        </div>
63    </body>
64
65</html>

HTML
1＜＜遷移後＞＞
2<!DOCTYPE html>
3<html>
4    <head>
5        <script type="text/javascript" src="result.js"></script>
6        <link rel="stylesheet" href="result.css" type="text/css">
7    </head>
8
9    <body>
10    <form name="keyNum">
11        <div id="g1">
12            <input type="text" id="s1" class="sheet">
13            <input type="text" id="s2" class="sheet">
14            <input type="text" id="s3" class="sheet">
15            <input type="text" id="s4" class="sheet">
16            <input type="text" id="s5" class="sheet">
17            <input type="text" id="s6" class="sheet">
18            <input type="text" id="s7" class="sheet">
19        </div>
20        <div id="g2">
21            <input type="text" id="s8" class="sheet">
22            <input type="text" id="s9" class="sheet">
23            <input type="text" id="s10" class="sheet">
24            <input type="text" id="s11" class="sheet">
25            <input type="text" id="s12" class="sheet">
26            <input type="text" id="s13" class="sheet">
27            <input type="text" id="s14" class="sheet">
28        </div>
29    </form>
30    </body>
31</html>

試したこと

JSファイルを遷移前のページと遷移先のページで共有し、クリックイベントによって遷移前ページの情報を遷移先に反映させる

補足情報（FW/ツールのバージョンなど）

JSは外部ファイルで作成しています

m.ts10806

2019/06/19 02:32

そもそも、JavaScriptにはフォーム送信した情報を受け取る機能はありませんがそちらは認識済みですか？（GETで送信してURL解析するロジックを自分で組めば別ですが）

退会済みユーザー

2019/06/19 03:02

そうなんですね！不勉強なもので、認識してませんでした！ありがとうございます！

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

回答1件

ベストアンサー

遷移しないといけないのでしょうか？
同じページ内であれば簡単にいけそうな処理だと思います

投稿2019/06/19 03:32

yambejp

総合スコア114843

退会済みユーザー

2019/06/19 04:04

ほんとうですか！？その場合、HTMLのbodyタグには記述しないのでしょうか？同じページ内で画面表示を変える、というイメージができず...。

yambejp

2019/06/19 04:15

入力画面と結果画面を用意し最初は結果画面を隠す入力後に「席をきめる」ボタンで入力画面を隠し結果画面を表示した上で結果を表示するという流れです。場合によっては入力画面は隠さなくてもよいかも。チェックボックスを付け替えて再出力が楽です

m.ts10806

2019/06/19 05:08

データをどうしたいのかによりますね。自分だけみれたらいいのか、共有するのか。

退会済みユーザー

2019/06/19 06:13 編集

なるほど！隠しておくという発想はありませんでした...。ありがとうございます！プログラムの流れは、 ①チェックボックスで任意の人名を選択 ②「席を決める」ボタンでチェックボックスの「.checked」がtrueの項目を配列に格納する ③重複しないランダム値を発生させ、(ランダム値,チェックボックスの項目)という形でDictionaryを作成　(ランダム値は、「numランダム値」という形でkeyに設定） ④人数分の座席表を表すテキストボックスを作成(テキストボックスのIDは、Dictionaryのkeyと一致するように設定「num1,num2...」) ⑤Dicitonaryのkeyを元にテキストボックスを取得し、innerTextにDictionaryのvalueを代入　(document.getElementById(key).innerText = value) ⑥テキストボックスに全員の名前がランダムで表示されるという流れで考えていました！

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