Servlet/JSPを用いたWebアプリ開発で必要だった知見

作ろうとしたもの

• 動的カレンダー
  • 「年」と「月」を指定することで該当月のカレンダーを表示する
  • データベースと連携し、予定のある日のセルにはタイトルを表示する
  • 日付をクリックすることで予定入力画面へ遷移
  • タイトルをクリックすることで予定編集画面へ遷移

JSPでのsubmit方法

• セレクトボックスを変化させるたびにカレンダーを変化させたかった
  • 自分の行った実装

calendar.jsp

<form action = "top" method = "get" name = "yearMonthSelect">
	<select name = "year" id = "year" onchange = "submit( this.form )">
		<option value = "2022">2022年</option>
		<option value = "2023">2023年</option>
		<option value = "2024">2024年</option>
	</select>
	<select name = "month" id = "month" onchange = " submit( this.form )">
		<option value = "1">1月</option>
		<option value = "2">2月</option>
		<option value = "3">3月</option>
		<!-- 以下省略 -->
	</select>
</form>

• 成功した実装

calendar.jsp

<form action = "top" method = "get" name = "reloadCalendar()">
	<select name = "year" id = "year" onchange = "submit( this.form )">
		<option value = "2022">2022年</option>
		<option value = "2023">2023年</option>
		<option value = "2024">2024年</option>
	</select>
	<select name = "month" id = "month" onchange = "reloadCalendar()">
		<option value = "1">1月</option>
		<option value = "2">2月</option>
		<option value = "3">3月</option>
		<!-- 以下省略 -->
	</select>
</form>

calendar.js

function reloadCalendar(){
	document.yearMonthSelect.submit();
}

• javaScript経由でsubmitすることで問題なく値の受け渡しに成功した
• jspはServletに変換されてから実行されることが関係しているらしい