フォームに初期入力値を設定する強化ガジェット

フォームブロックに置いて各フィールドに対して初期入力値を設定する強化ガジェットのご紹介です。
name値と入力値を指定するだけで、自動的にフィールドタイプを判定して初期値が入力されます。

注意点

・入力コントロールで、[年/月/日][時/分/秒]の形式で設定してください
・HTML5で表示させているため、対応していないブラウザがあります

コード設定方法

ブロックもしくはページの Javascript タブにコードを貼り付けて、設定値を変更してください。
設定値は例で入れていますので、参考に変更をしてください。
Javascript

// 設定値
function setInitialValues() {
    setInitialValue('f01', 'テキストフィールドの初期値');
    setInitialValue('f02', 'テキストエリアの初期値');
    setInitialValue('f03', '2'); // ラジオボタンの選択
    setInitialValue('f04', '3'); // ドロップダウンの選択
    setInitialValue('f05', ['1', '2']); // チェックボックスの選択 (複数の値)
                
    //日付・日時系のサンプル
    setInitialValue('f06:year', '2024');
    setInitialValue('f06:month', '07');
    setInitialValue('f06:day', '17');
    setInitialValue('f06:hour', '10');
    setInitialValue('f06:minute', '30');
    setInitialValue('f06:second', '00');
    setInitialValue('f06:tz', 'Asia/Tokyo');
    //メールアドレスのサンプル
    setInitialValue('f012', 'example@example.com');
    setInitialValue('f012:reenter', 'example@example.com');
}
            
// 原則変更不可
// 複数強化パーツがある場合、変更あり
window.onload = function() {
    setInitialValues();
};

// 変更不可
function setInitialValue(name, value) {
    const inputElement = document.querySelector(`[name="${name}"]`);

    if (inputElement) {
        // inputsが{}であるかどうかの条件をチェック
        const hiddenInput = document.querySelector('input[type="hidden"][name="session"]');
        const sessionData = hiddenInput ? JSON.parse(hiddenInput.value) : {};
        const inputsEmpty = sessionData.inputs && Object.keys(sessionData.inputs).length === 0;

        if (inputsEmpty) { // inputsが{}の場合のみ設定
            if (inputElement.type === 'text' || inputElement.type === 'textarea' ||
                inputElement.type === 'select-one' || inputElement.type === 'number' ||
                inputElement.type === 'email') {
                inputElement.value = value;
            } else if (inputElement.type === 'radio') {
                const values = Array.isArray(value) ? value : [value];
                document.querySelectorAll(`[name="${name}"]`).forEach(element => {
                    element.checked = values.includes(element.value);
                });
            } else if (inputElement.type === 'checkbox') {
                const values = Array.isArray(value) ? value : [value];
                document.querySelectorAll(`[name="${name}"]`).forEach(element => {
                    element.checked = values.includes(element.value);
                });
            }
        }
    }
}

設定値

setInitialValue('name値', '初期入力値');

第一引数に対象のフィールドのname値を入力し、
第二引数に初期入力値を入力してください。
複数フィールドに初期入力値を指定したい場合は使用例の様に複数setInitialValueを記載してください。

Thymeleafで設定する方法

Thymeleafを使用して各種入力フィールドに初期値を設定する方法を説明します。
以下は各フィールドタイプ別に初期値を設定する方法です。

1. テキスト入力フィールド
- 初期値は`th:value`属性で設定します。
- 例:

th:value="初期入力値text"

2. テキストエリアフィールド
- 初期値は`th:text`属性で設定します。
- 例:

th:text="初期入力値area"

3. ラジオボタンフィールド
- 初期選択状態は`th:checked`属性で設定します。
- 例:

th:checked="${option.id == 1}"

4. ドロップダウンフィールド
- 初期選択状態は`option`タグの`th:selected`属性で設定します。
- 例:

th:selected="${option.id == 1}"

5. チェックボックスフィールド
- 初期選択状態は`th:checked`属性で設定します。
- 例:

th:checked="${option.id == 1 || option.id == 3}"

上記の設定により、各フィールドに初期値を設定することができます。

開発情報・ナレッジ

注意点

コード設定方法

Thymeleafで設定する方法

関連記事