前提

JavaScriptで、フォームの内容を取得し、次のページへクエリで引き継ぎたい。

実現したいこと

1.フォームに入力

名前:あ
ID:い（表示していない）
選択肢ボタン:3
ラジオボタン:2
お問合せ内容:う

2.次へボタンを押すと、クエリに入力内容を入れて次のページへ移動
https://***.com/next.html/?name=あ&id=い&section=3&radio=2&text=う

発生している問題

ボタンを押しても動作しない

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <link rel="stylesheet" href="style.css"> 
6  <title>お問い合わせフォーム</title>
7p {
8
9font-family: "font_1";
10}
11.text {
12font-family: "rogpurs";
13}
14.user{
15 display:none !important;
16}
17</style>
18</head>
19
20<!-- intoでクエリをフォームのバリューに入れています -->
21<body onload="into()">
22    <form method="post">
23        <div>
24            <div>
25                <div>
26                    お名前
27                    <span>必須</span>
28                </div>
29                <div>
30                    <input type="text" name="f01" id="name" value="" />
31                </div>
32            </div>
33<div class="user">
34           <input type="text" name="f01" id="id" value="" />
35</div>
36
37   <div>
38                <div>
39                    お問い合わせカテゴリ
40                </div>
41                <div>
42                    <div>
43                        <select id="target" name="f05">
44                            <option value="" selected="selected">----- 選択してください -----</option>
45                            <option value="1">商品について</option>
46                            <option value="2">配送について</option>
47                            <option value="3">その他</option>
48                        </select>
49                        <span></span>
50                    </div>
51
52
53                </div>
54            </div>
55
56            <div>
57                <div>
58                    購入状況
59
60                </div>
61                <div>
62                    <div>
63                        <label>
64                            <input type="radio" name="f04" id="ct" value="1" />
65                            <span>購入前</span>
66                        </label><label>
67                            <input type="radio" name="f04" id="ct" value="2" />
68                            <span>商品の到着待ち</span>
69                        </label><label>
70                            <input type="radio" name="f04" id="ct" value="3" />
71                            <span>商品が到着済み</span>
72                        </label>
73                    </div>
74
75
76                </div>
77            </div>
78
79
80            <div>
81                <div>
82                    お問い合わせ内容
83
84                </div>
85                <div>
86                    <textarea id="text" name="f02"></textarea>
87
88
89                </div>
90            </div>
91                </div>
92            </div>
93            <div>
94
95                <button type="button" onclick="nextPage();"text"name="action" value="next">次へ</button>
96            </div>
97
98    </form>
99</div>
100<script language="JavaScript" type="text/javascript">  
101function nextPage() {
102  let checkValue = '';
103  for (let i = 0; i < len; i++){
104    if (byRadio.item(i).checked){
105      checkValue = byRadio.item(i).value;
106    }
107  }
108let byRadio = document.getElementsByName('by');
109let len = byRadio.length;
110byRadio[0].checked = true;
111
112let checkButton = document.getElementById('checkButton');
113checkButton.addEventListener('click', butotnClick);
114  
115              var element = document.getElementById( "target" ) ;
116                var a = element.value ;
117                name = document.login_form.name.value
118                id = document.login_form.id.value;
119                ct = a
120                by = checkValue
121                text = document.login_form.text.value
122                location.href = "next.html/?name="+name+"&id="+id+"&ct="+ ct +    "&by="+by+"&text="+ text ;
123            }
124        </script>

試したこと

どうしたらいいのか何もわからなかった

m.ts10806

2023/01/29 01:49

インデントぐちゃぐちゃのが気になりますが、ここまでどのように書かれましたか？自身で書かれた割合次第では「何もわからない」とならないとは思うのですが、エラーがでているかとかは確認されましたか？

ROGPURS

2023/01/29 01:52

途中でclassなどを削除したり不必要の情報を消したりしてしまいぐちゃぐちゃになってしまいました。申し訳ございません。記述はメモ帳で行いましたエラーなどは確認できませんでした。

m.ts10806

2023/01/29 02:05

ブラウザの開発ツールのコンソールは確認されてますか？ Javascriptのエラーは何かそういうエラーハンドリングと出力を書かない限り画面上には出ません。確認して、結果を質問本文に追記してください。また、プログラミングをする際にメモ帳などは不適切です。コードフォーマット機能や補完機能、構文チェック機能のつけられる（もしくはついている）エディタを選ぶところから（要は環境整備化）はじめましょう。

ROGPURS

2023/01/29 02:08

開発ツールのコンソールは確認済みですが、--としか出ませんでした。またアドバイスありがとうございます

m.ts10806

2023/01/29 02:13

その画面キャプチャを提示してください。いずれにしても現在の質問本文からは何も調べず試さずただどうしたらいいかわからないと丸投げしてる状態なので、質問本文を加筆修正してください

miyabi_pudding

2023/01/29 03:48

本文記載のHTMLは、 next.htmlのものですか？

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

回答2件

何点か、質問要件を想定した上で、課題整理のような回答になりますことをご了承ください。

`form`の`method`が`post`では、URLパラメータ受け取りとはならない

URLパラメータで受け取りたい場合、postでは基本的にURLには載りません。
getが有効でしょう。
現在は、JSによって、location.hrefにてページ遷移させようとしてますが、
getであれば、form要素単体で、
ページ遷移と、formの中のinputなどの値がURLパラメータに記載されますので、
今回の要件では、その部分にはJS処理は必要ないものと思われます。

`form`要素の`action`を指定する

form要素は、actionに指定したパスに対して、postなりgetなりで、
内容を含めた送信遷移を行う挙動となります。
質問のコードでは、actionの指定がないため、
form要素単体では遷移する仕様が保証されません。
（ただし、大体のブラウザでは、自身にpost・getするようです）
今回の質問では、next.htmlで受け取りたいとお見受けするので、
action="next.html"を指定するのがいいかと

本コードは、`next.html`なのかどうか

質問コメントでも記載しましたが、
記載のコードは、受け取る側のコードとお見受けするので、
next.htmlだと思いますが、
formの内容を送信するような記述もあるため、
送信側なのか、受信側なのか、をはっきりさせる必要があります。
（送信も受信もnext.htmlなのならば、特に問題はない）