EM-Spring/src/main/resources/templates/updateEmployeeInput.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <!-- 外部のスクリプトファイルを読み込む -->
    <script th:src="@{/js/common.js}"></script>
    <!-- CSSの読み込み -->
    <link rel="stylesheet" th:href="@{/css/all.css}">
    <link rel=stylesheet th:href="@{/css/style.css}" type="text/css">
    <title>社員情報更新</title>
</head>

<body>
<h1>
    社員情報更新　　　
    <div class="rightSection">
        <span class="loginInfo">ログイン者名：<span th:text="${session.loginUser.nmEmployee}"></span></span>
        <button class="logoutButton" onclick="logoutSubmit()">ログアウト</button>
    </div>
</h1>
<form action="/updateEmployeeResult"
      method="post"
      onsubmit="return confirm('本当によろしいですか？');"
      th:object="${updateEmployeeInfoForm}"
>
    <div class="msgBox error" th:if="${messageError != null}">
        <span class="error" th:each="message : ${messageError.message}" th:text="${message}"></span>
    </div>
    <table>
        <tr>
            <th class="header">社員ID</th>
            <td>
                <label>
                    <input class="readOnly"
                           readonly="readonly"
                           th:field="*{idEmployee}"
                           type="text"
                    />
                </label>
            </td>
        </tr>
        <tr>
            <th class="header">社員名</th>
            <td>
                <label>
                    <input maxlength="50"
                           placeholder="社員名"
                           required="required"
                           th:field="*{nmEmployee}"
                           type="text"
                    />
                </label>
            </td>
        </tr>
        <tr>
            <th class="header">社員名フリガナ</th>
            <td>
                <label>
                    <input maxlength="50"
                           oninput="convertToKatakana(this)"
                           placeholder="フリガナ"
                           required="required"
                           th:field="*{knEmployee}"
                           type="text"
                    />
                </label>
            </td>
        </tr>
        <tr>
            <th class="header">メールアドレス</th>
            <td>
                <label>
                    <input maxlength="100"
                           placeholder="メールアドレス"
                           required="required"
                           th:field="*{mailAddress}"
                           type="email"
                    />
                </label>
            </td>
        </tr>
        <tr>
            <th class="header">パスワード</th>
            <td>
                <label>
                    <input pattern="^(?=.*?[a-zA-Z])(?=.*?\d)[a-zA-Z\d]{3,10}$"
                           placeholder="パスワード"
                           th:field="*{password}"
                           type="password"
                    />
                </label>
            </td>
        </tr>
        <!-- *** Chrome等のブラウザの場合自動でセットされる可能性があるので注意書きを外にも *** -->
        <tr>
            <th></th>
            <td>
                <span style="font-size:8pt;
                            font-weight:bold;
                            color:red;">
                    ※半角英数字をそれぞれ1種類以上含む3-10文字
                </span>
            </td>
        </tr>
        <tr>
            <th class="header">パスワード確認用</th>
            <td>
                <label>
                    <input pattern="^(?=.*?[a-zA-Z])(?=.*?\d)[a-zA-Z\d]{3,10}$"
                           placeholder="パスワード確認用"
                           th:field="*{passwordConfirm}"
                           type="password"
                    />
                </label>
            </td>
        </tr>
        <tr>
            <th class="header">管理者権限</th>
            <td>
                <label>
                    <input id="adminAuth1" name="adminAuth" th:checked="${updateEmployeeInfoForm.adminAuth == 1}"
                           type="radio"
                           value="1"> 管理者権限
                </label>
                <label>
                    <input id="adminAuth0" name="adminAuth"
                           th:checked="${updateEmployeeInfoForm.adminAuth == null or updateEmployeeInfoForm.adminAuth == 0}"
                           type="radio"
                           value="0">
                    一般権限
                </label>
            </td>
        </tr>
        <tr>
            <th class="header">所属部署</th>
            <td>
                <label>
                    <select required="required" th:field="*{idDepartment}">
                        <option th:each="department : ${departmentFormList}"
                                th:selected="${updateEmployeeInfoForm.idDepartment != null && department.idDepartment == updateEmployeeInfoForm.idDepartment}"
                                th:text="${department.nmDepartment}"
                                th:value="${department.idDepartment}">
                        </option>
                    </select>
                </label>
            </td>
        </tr>
        <tr>
            <td class="btnArea" colspan="2">
                <input type="submit" value="更新"/>
            </td>
        </tr>
    </table>
</form>
<a href="javascript:selectSubmit()">一覧に戻る</a>
</body>

<script>
    function selectSubmit() {
        const form = document.createElement('form');
        form.setAttribute('method', 'post');
        form.setAttribute('action', 'selectAll');

        // 動的送信用のHidden
        // 動的にFormを作成する場合は何かしら送信しないと、正しく動作しない
        const inputField = document.createElement("input");
        inputField.setAttribute("type", "hidden");
        inputField.setAttribute("value", "selectAll");

        form.appendChild(inputField);

        // フォームをDOMに追加
        document.body.appendChild(form);

        form.submit();
    }

</script>
</html>