はじめに
EclipseでJava + SpringBoot + Thymeleafを使ったアプリ開発をしています。
将来の自分へ且つ、お困りの方に向けてメモ程度ですが残しておきたいと思います。
本記事は、CRUDのうちのU (Update)に関する内容になります。
今回、ユーザーがパスワード変更する際に以下のような挙動をJavaScriptで実装します。
- 編集して値に変更がある状態で戻るボタンを押下すると確認ダイアログが表示される
- 値に変更がなければ前のページに戻る
- 値に変更がない状態で更新アクションを起こした際はアラートを表示し、パスワードを変更するよう促す
SpringBootのEntity、Repository、Serviceについては割愛します。
ビューのテンプレートエンジンにThymeleafを使用しています。
id属性、name属性はご自身のプロジェクトに合わせて適宜修正お願いします。
実際のコード
edit.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>パスワードの変更</title>
</head>
<body>
<h1>パスワードの変更</h1>
<!-- 省略 -->
<script th:inline="javascript">
/*
※「はじめに」の1, 2に該当
戻るボタン押下時に入力内容に変更があれば確認ダイアログを出す処理：backConfirm()
・変更がある場合
→ ダイアログ「変更を破棄して戻りますか？」を表示
→「OK」選択で戻る
→「キャンセル」選択で戻らない
・変更がない場合
→ 前のページへ戻る
*/
function backConfirm() {
// input要素のhidden属性（id属性がuserPassword）の値(パラメータ)を取得
const oldPasswordValue = document.getElementById("userPassword").value;
// input要素（id属性がcurrentPassword）の入力値を取得
const currentPasswordValue = document.getElementById("currentPassword").value;
// 型まで含めて同じ値か判定 (falseなら確認ダイアログを表示せずに戻る)
if (oldPasswordValue !== currentPasswordValue) {
// 値が違っていた場合に確認ダイアログを表示
if (window.confirm("変更を破棄して戻りますか？")) {
return true; // 「OK」なら戻る
} else {
return false; // 「キャンセル」なら戻らない
}
}
}
/*
※「はじめに」の3に該当
更新ボタン押下時に入力内容が入力前と重複していればアラートを出す処理：duplicateCheck()
・重複している場合
→アラート「以前のパスワードと重複しています。」を表示
・重複していない場合
→更新する
*/
function duplicateCheck() {
// input要素のhidden属性（id属性がuserPassword）の値(パラメータ)を取得
const oldPasswordValue = document.getElementById("userPassword").value;
// input要素（id属性がcurrentPassword）の入力値を取得
const currentPasswordValue = document.getElementById("currentPassword").value;
// 入力した値が入力前と同じだった場合にアラートを表示
if (oldPasswordValue === currentPasswordValue) {
window.alert("パスワードを変更してください。");
return false;
}
}
</script>
<!-- パスワード変更フォーム -->
<form th:action="@{/edit}" method="post">
<th:block th:each="u : ${editUser}">
<table border="1">
<tr>
<th>ユーザー名</th>
<td th:text="${u.userName}"></td>
</tr>
<tr>
<th>パスワード</th>
<td><input type="text" name="currentPassword" id="currentPassword" th:value="${u.userPassword}"
placeholder="ここにパスワードを入力" required></td>
</tr>
</table>
<input type="submit" name="back" onclick="return backConfirm()" value="戻る">
<input type="submit" name="update" onclick="return duplicateCheck()" value="更新">
<input type="hidden" name="userName" th:value="${param.userName}">
<input type="hidden" name="userPassword" id="userPassword" th:value="${param.userPassword}">
</th:block>
</form>
</body>
</html>