Javascriptでを結合した文字列をSpringのFormクラスのフィールドにバインドするにはどうしたらいいのでしょうか？

Question

やりたいこと

セレクトボックスで入力した3つの値を結合してSpringのFormクラスのフィールドにバインド

Javascriptで文字列を結合してele.valueに代入したいのですができません。
どこが悪いのでしょうか？

https://github.com/yukikoike/project1

'use strict';
window.onload = function() {
  var myMonthArry = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

  // inputSelectYear要素の取得
  var inputSelectYear = document.querySelector("#inputSelectYear");
  var year = inputSelectYear.value
  console.log(inputSelectYear.value);
  // inputSelectMonth要素の取得
  var inputSelectMonth = document.querySelector("#inputSelectMonth");

  // option要素の取得（配列）
  var inputSelectMonthOptions = document.querySelectorAll("#inputSelectMonth option");

  // inputSelectMonth要素の取得
  var inputSelectDay = document.querySelector("#inputSelectDay");

  year = inputSelectYear.value
  if (year % 4 === 0 && (year % 100 !== 0 || year % 400 !== 0)) {
    myMonthArry[1] = 29;
  } else {
    myMonthArry[1] = 28;
  }

  inputSelectDay.textContent = null;
  for (var i = 1;i <= myMonthArry[inputSelectMonth.value - 1];i++) {
    // FIXME
    let option = document.createElement('option');
    option.value = i;
    option.text = i;
    inputSelectDay.appendChild(option);
  }

  // inputSelectYear要素のchangeイベントの登録
  inputSelectYear.addEventListener('change', function() {
    // http://shanabrian.com/web/javascript/removechild.php
    //if (inputSelectDay.options.length !== 1) {
    year = inputSelectYear.value
    if (year % 4 === 0 && (year % 100 !== 0 || year % 400 !== 0)) {
      myMonthArry[1] = 29;
    } else {
      myMonthArry[1] = 28;
    }

    inputSelectDay.textContent = null;
    for (var i = 1;i <= myMonthArry[inputSelectMonth.value - 1];i++) {
      // FIXME
      let option = document.createElement('option');
      option.value = i;
      option.text = i;
      inputSelectDay.appendChild(option);
    }
  });


  // inputSelectMonth要素のchangeイベントの登録
  inputSelectMonth.addEventListener('change', function(){
      // http://shanabrian.com/web/javascript/removechild.php
      //if (inputSelectDay.options.length !== 1) {
      year = inputSelectYear.value
      inputSelectDay.textContent = null;
      for (var i = 1;i <= myMonthArry[inputSelectMonth.value - 1];i++) {
        // FIXME
        let option = document.createElement('option');
        option.value = i;
        option.text = i;
        inputSelectDay.appendChild(option);
      }
  });


  var submit = document.getElementById('submit');
  inputSelectDay = document.getElementById('inputSelectDay');

  if (submit == null) {
    submit = document.getElementById('submit');
  }
  console.log(submit);
  submit.addEventListener('click', () => {
    var y = inputSelectYear.value;
    var m = inputSelectMonth.value;
    if (m.toString().length === 1) {
      m = '0' + m;
    }
    var d = inputSelectDay.value;
    if (d.toString().length === 1) {
      d = '0' + d;
    }
    inputSelectDay.value = (y + m + d);
    console.log(inputSelectYear.value);
    console.log(inputSelectMonth.value);
    console.log(inputSelectDay.value);
    console.log(inputSelectDay.value);
    var inputEmailAddress = document.getElementById('inputEmailAddress').value;
    var inputEmailAddressConfirm = document.getElementById('inputEmailAddressConfirm').value;
    var inputPassword = document.getElementById('inputPassword').value;
    var inputPasswordConfirm = document.getElementById('inputPasswordConfirm').value;

    if (inputEmailAddress != inputEmailAddressConfirm) {
        event.preventDefault();
        alert('メールアドレスが一致しません。');
      } else if (inputPassword != inputPasswordConfirm) {
        event.preventDefault();
        alert('パスワードが一致しません。');
      }
      var request = new XMLHttpRequest();
      request.open('GET', 'http://localhost:8080/project1/registered_check?emailAddress=' + inputEmailAddress, false);
      request.send('?emailAddress=' + inputEmailAddress);
      if (request.responseText === 'true') {
        event.preventDefault();
        alert('メールアドレスが登録されているため登録できません。');
      }
      console.log(request.responseText);
  })}

<!-- 文字数制限のため上は省略 -->
          <div class="form-group">
            <label class="control-label" for="inputSelectYear"><abbr title="required">*</abbr>生年</label>
            <select class="form-control" id="inputSelectYear" name="selectYear">
              <option th:each="year : ${selectYear}" th:value="${year}" th:selected="${year== year}" th:inline="text">[[${year}]]</option>
            </select>
<!--             <span th:if="${#fields.hasErrors('')}" th:errors="*{dateOfBirth}" class="help-block">error!</span> -->
          </div>
          <div class="form-group">
            <label class="control-label" for="inputSelectMonth"><abbr title="required">*</abbr>生月</label>
            <select class="form-control" id="inputSelectMonth" name="selectMonth">
              <option th:each="month : ${selectMonth}" th:value="${month}" th:selected="${month == month}" th:inline="text">[[${month}]]</option>
            </select>
<!--             <span th:if="${#fields.hasErrors('')}" th:errors="*{dateOfBirth}" class="help-block">error!</span> -->
          </div>
          <div class="form-group">
            <label class="control-label" for="inputSelectDay"><abbr title="required">*</abbr>生日</label>
            <select class="form-control" id="inputSelectDay" name="selectDay" th:field="*{dateOfBirth}">
<!--               <option value="1" selected th:value="${month}" th:inline="text">1</option> -->
            </select>
<!--             <span th:if="${#fields.hasErrors('')}" th:errors="*{dateOfBirth}" class="help-block">error!</span> -->
          </div>
 <!-- 文字数制限のため下も省略 -->

package com.koikeya.project1.domain.model;

import java.io.Serializable;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.Table;

import org.springframework.stereotype.Component;

import lombok.Data;

/**
 * 一時ユーザーエンティティクラス
 *
 * @author user
 *
 */
@Data
@Entity
@Table(name = "TEMP_USER")
@Component
public class TempUser implements Serializable {

        /**
         * UUID
         */
        @Id
        @Column(name = "UUID")
        private String uuid;

        /**
         * メールアドレス
         */
        @Column(name = "EMAIL_ADDRESS")
        private String emailAddress;

        /**
         * 権限ID
         */
        @Column(name = "ROLE_ID")
        private String roleId;

        /**
         * 姓
         */
        @Column(name = "LAST_NAME")
        private String lastName;

        /**
         * セイ
         */
        @Column(name = "RUBY1")
        private String ruby1;

        /**
         * 名
         */
        @Column(name = "FIRST_NAME")
        private String firstName;

        /**
         * メイ
         */
        @Column(name = "RUBY2")
        private String ruby2;

        /**
         * 生年月日
         */
        @Column(name = "DATE_OF_BIRTH")
        private String dateOfBirth;

        /**
         *パスワード
         */
        @Column(name = "PASSWORD")
        private String password;

        /**
         * 登録日時
         */
        @Column(name = "CREATED_AT", insertable = false, updatable = false)
        private String createdAt;
}

Answer 1

htmlコードが省略されているので推測になりますが、(y + m + d)のようにして年 + 月 + 日を結合する目的は、フォームの生年月日フィールドに代入することではないでしょうか?
下記のコードでは日フィールドに代入することになり意図通りでは無いように思います。

submit.addEventListener('click', () => {
    var y = inputSelectYear.value;
    var m = inputSelectMonth.value;
    if (m.toString().length === 1) {
      m = '0' + m;
    }
    var d = inputSelectDay.value;
    if (d.toString().length === 1) {
      d = '0' + d;
    }
    inputSelectDay.value = (y + m + d);

    // 省略

});

おそらく、フォームには下記のようなhiddenフィールドがあり

<input type="hidden" id="dateOfBirth" name="dateOfBirth" />

生年月日フィールドに(y + m + d)で連結した値を代入するのが本来の意図ではないでしょうか?

var inputDateOfBirth = document.querySelector("#dateOfBirth");
inputDateOfBirth.value = (y + m + d);

Comments

[yuki1111]

hiddenフィールドがなかったので、新たに作ってから上記の通りにやったらできました。
ありがとうございます！