javascriptでsubmit()を実行してもデータを送信できない。

javascriptで、カレンダーの日付部分にリンクをつけて、そのリンクをクリックすると、その日の予定が表示されるようなwebアプリを作っています。

そこで、クリックした日付がいつなのかという情報を、表示するページに送るために、
javascriptのsubmit()メソッドを使用したのですが、画面が遷移するだけで送信先のページにデータが送られていませんでした。

何が原因なのでしょうか、教えていただけると嬉しいです。

※カレンダーは、このサイトに乗っているものを参考にさせていただきました。

html
1<html>
2<head>
3<title>カレンダー設置ページ</title>
4
5<link rel="stylesheet" type="text/css" href="calen_link/calendar.css">
6
7</head>
8<body>
9
10<span id="calenArea"></span>
11<script type="text/javascript" src="calen_link/calendar.js"></script>
12
13</body>
14</html>

js
1/*
2   -----------------------------------------------------
3   カレンダー（リンク機能付き）
4   Ver. 1.0.2
5   update 2011.3.5
6   Copyright (C) WEB-JOZU  URL:http://www.web-jozu.com/
7   -----------------------------------------------------
8*/
9
10function resistData(dateNum){	
11	var target = document.getElementById("form"+dateNum);
12	console.log("form"+dateNum);
13	console.log(target);
14      target.method = "post";
15	  target.action = "http://localhost:8080/mainform"; 
16      target.submit();
17}
18
19
20//calenDataの中身を#calenAriaに追加することで、カレンダー表を作っています。onclickでresistDataを呼び出しています。
21
22calenData += '<span style="position:relative; display:block; z-index:' + zNum-- + ';"><span id="d' + (theMonth + 1) + dateNum + '"></span><a href="javascript:linkGo(\'' + (theMonth + 1) + '\',\'' + dateNum + '\');void(0);"   onmouseover="showTtl(\'' + (theMonth + 1) + '\',\'' + dateNum + '\')" onclick="resistData('+dateNum+')" onmouseout="hideTtl(\'' + (theMonth + 1) + '\',\'' + dateNum + '\')" class="linkArea">';
23
24calenData += '</a><form id="form'+dateNum+'"><input type="hidden" name="month" value='+(theMonth+1)+'><input  type="hidden" name="date" value='+dateNum+'></form></span>';
25

resistDataが呼び出されるのは確認済みです。

http://localhost:8080/mainformの画面について

html
1<html xmlns:th="http://www.thymeleaf.org">
2<head>
3<meta charset="UTF-8">
4<title>insert here</title>
5	<link rel="stylesheet" href="css/mainform.css">
6	
7	<script type="text/javascript" src = "js/dateformatter.js"></script>
8	
9</head>
10<body class=body>
11	
12</body>
13</html>

js
1
2var result = {};
3console.log(window.location.search.substring( 1 ));
4    if( 1 < window.location.search.length )
5    {
6        // 最初の1文字 (?記号) を除いた文字列を取得する
7        var query = window.location.search.substring( 1 );
8
9		console.log(query);
10
11        // クエリの区切り記号 (&) で文字列を配列に分割する
12        var parameters = query.split( '&' );
13
14        for( var i = 0; i < parameters.length; i++ )
15        {
16            // パラメータ名とパラメータ値に分割する
17            var element = parameters[ i ].split( '=' );
18
19            var paramName = decodeURIComponent( element[ 0 ] );
20            var paramValue = decodeURIComponent( element[ 1 ] );
21
22            // パラメータ名をキーとして連想配列に追加する
23            result[ paramName ] = paramValue;
24        }
25    }

window.location.search.substring( 1 )に値があるかどうかで送信されていないかを区別しました。

情報が不十分でした、すみませんでした。

takasima20

2021/07/14 13:15

http://localhost:8080/mainform て何使って書いてあるの? そこで、どうやって送られたものを確認したの?

ryu-bamboo

2021/07/14 14:26

＜http://localhost:8080/mainform て何使って書いてあるの? 質問の答えになっているか自信ないですが、 springBoot開発していて、＠RequestMapping というアノテーションを使って書きました。

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

回答2件

現状だとsubmitしてはいますが、そのform内に入力コントロール（input,select,textareaなど）が存在しないのでは。

form送信で送りたいのでしたら、そのform内に送りたい情報を入力コントロールとして配置する必要があります。
※submit();前であればJavaScriptでcreateElementなどしてform内にその時だけ配置するのでも送られるはずです

投稿2021/07/14 11:42

m.ts10806

総合スコア80850

m.ts10806

2021/07/14 11:45

＞送信先のページにデータが送られていませんでした。これをどのように確認したのか、 formがどうなってるか、は気になりますが。

ryu-bamboo

2021/07/14 14:05

すみません、あとで<form>の部分を質問の欄に載せていないことに気付きました… javascriptのCodeの一番下の行に追記したので、よろしければ見た頂けると嬉しいです。 dataの送り先に、console.log(window.location.search);で、送られた情報を表示するようにして、何も表示されなかったので、送られていないと判断しました。

m.ts10806

2021/07/14 19:39 編集

POSTはサーバーサイドの言語で受け取るので、別にPOSTでも問題はないです。要件次第。（＠RequestMappingならGETも受け取るはずです。JavaScriptだけで判断するのは早計）

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