JavaScriptのPOST送信がうまく行われない

「JavaScriptにイベント名、年、月、日を保存した連想配列を3つ記録しておく。
テキストボックスにイベント名を入力し、入力したものと、連想配列に保存されているイベント名で一致するものがあればServletに連想配列のイベント名、年、月、日の情報を、一致するイベント名が存在しなかった場合はエラ〜メッセージを表示するページに遷移する」

というjspプログラムを作りたいのですが、「送信」ボタンを押した以降、うまく動作しません。
具体的には以下のようになります。
・テキストボックスに連想配列と一致するイベント名を入力して「送信」ボタンを押す→何も起こらない
・テキストボックスに連想配列のイベント名と一致しないイベント名（何らかの文字列）を入力して「送信」ボタンを
押す→エラ〜メッセージが表示されるページに遷移
・テキストボックスに何からの文字列を入力（イベント名の一致は考えない）して「送信」ボタンを押す→Servletに移動（画面は真っ白）

これはJavaScriptのPOST送信でエラーが起こっているのでしょうか？
Eclipseを使っているのでJavaScriptのデバッグができないのでどこの値が違っているのかがわかりません。

どなたかご教授いただけますでしょうか？
よろしくお願いいたします。

※Eclipse(Oxigen),Tomcat(8)を使用しております。

jsp
1<%@ page language="java" contentType="text/html; charset=UTF-8"
2    pageEncoding="UTF-8"%>
3<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4<html>
5<head>
6<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7<meta http-equiv="Content-Script-Type" content="text/javascript">
8<title>Insert title here</title>
9</head>
10<body>
11<script type="text/javascript">
12function sendEvent(){
13	let event1 = { eventName:'誕生日' ,eventYear:'2020', eventMonth:'08' ,eventDay:'22' };
14	let event2 = { eventName:'バレンタイン', eventYear:'2021', eventMonth:'02', eventDay:'14'};
15	let event3 = { eventName:'クリスマス', eventYear:'2020', eventMonth:'12', eventDay:'25'};
16
17	var f = document.forms[form];
18	var eventName = document.getElementById("en").value;
19
20	if(eventName == event1.eventName){
21		setAttribute('eventName',event1.eventName);
22		setAttribute('eventYear',event1.eventYear);
23		setAttribute('eventMonth',event1.eventMonth);
24		setAttribute('eventDay',event1.eventDay);
25		f.submit();
26	}else if(eventName == event2.eventName ) {
27		input.setAttribute('eventName',event2.eventName);
28		input.setAttribute('eventYear',event2.eventYear);
29		input.setAttribute('eventMonth',event2.eventMonth);
30		input.setAttribute('eventDay',event2.eventDay);
31		f.submit();
32	}else if(eventName == event3.eventName) {
33		input.setAttribute('eventName',event3.eventName);
34		input.setAttribute('eventYear',event3.eventYear);
35		input.setAttribute('eventMonth',event3.eventMonth);
36		input.setAttribute('eventDay',event3.eventDay);
37		f.submit();
38	}else{
39		window.location.href = 'エラーメッセージが表示されるページのURL';
40	}
41}
42</script>
43<form action = "ServletのURL" method="post" name="form">
44イベント名を入力してください。<input type="text" name="eventName" id="en"><br>
45<input type="button" value="送信" onclick="sendEvent()">
46</form>
47</body>
48</html>

m.ts10806

2020/04/27 04:54

>Eclipseを使っているのでJavaScriptのデバッグができないこの根拠を提示してください。

m.ts10806

2020/04/27 05:04

あと、サーブレット側のコードもないと何とも言えない部分はあります。 POSTされたかどうかはサーブレット側でデバッグできるはずですし。＞f = document.forms[form]; これでほんとにとれてるか？とかエラー確認ならブラウザからできます

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

回答2件

ソースを見る限りですが、sendEvent関数内のvar f = document.forms[form]の箇所でエラーが起きているんだと思います。
やりたい事はドキュメント内の<form>タグの中からname属性が'form'であるものを取得しようとしているんだと思いますが、forms[form]の括弧の中がクォーテーション等で囲まれていないのでformが変数名ととらえられてしまい、そのような変数が定義されていないためエラーが起きている気がします。
ちゃんとクォーテーションを付けてvar f = document.forms['form']という風に記述すれば解決するのではないでしょうか。

投稿2020/04/27 05:07