🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2084閲覧

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

yuki1111

総合スコア73

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/12/23 15:54

編集2019/12/23 16:01

やりたいこと

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

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

https://github.com/yukikoike/project1

chromeでデバッグしているところです

javascript

1'use strict'; 2window.onload = function() { 3 var myMonthArry = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 4 5 // inputSelectYear要素の取得 6 var inputSelectYear = document.querySelector("#inputSelectYear"); 7 var year = inputSelectYear.value 8 console.log(inputSelectYear.value); 9 // inputSelectMonth要素の取得 10 var inputSelectMonth = document.querySelector("#inputSelectMonth"); 11 12 // option要素の取得(配列) 13 var inputSelectMonthOptions = document.querySelectorAll("#inputSelectMonth option"); 14 15 // inputSelectMonth要素の取得 16 var inputSelectDay = document.querySelector("#inputSelectDay"); 17 18 year = inputSelectYear.value 19 if (year % 4 === 0 && (year % 100 !== 0 || year % 400 !== 0)) { 20 myMonthArry[1] = 29; 21 } else { 22 myMonthArry[1] = 28; 23 } 24 25 inputSelectDay.textContent = null; 26 for (var i = 1;i <= myMonthArry[inputSelectMonth.value - 1];i++) { 27 // FIXME 28 let option = document.createElement('option'); 29 option.value = i; 30 option.text = i; 31 inputSelectDay.appendChild(option); 32 } 33 34 // inputSelectYear要素のchangeイベントの登録 35 inputSelectYear.addEventListener('change', function() { 36 // http://shanabrian.com/web/javascript/removechild.php 37 //if (inputSelectDay.options.length !== 1) { 38 year = inputSelectYear.value 39 if (year % 4 === 0 && (year % 100 !== 0 || year % 400 !== 0)) { 40 myMonthArry[1] = 29; 41 } else { 42 myMonthArry[1] = 28; 43 } 44 45 inputSelectDay.textContent = null; 46 for (var i = 1;i <= myMonthArry[inputSelectMonth.value - 1];i++) { 47 // FIXME 48 let option = document.createElement('option'); 49 option.value = i; 50 option.text = i; 51 inputSelectDay.appendChild(option); 52 } 53 }); 54 55 56 // inputSelectMonth要素のchangeイベントの登録 57 inputSelectMonth.addEventListener('change', function(){ 58 // http://shanabrian.com/web/javascript/removechild.php 59 //if (inputSelectDay.options.length !== 1) { 60 year = inputSelectYear.value 61 inputSelectDay.textContent = null; 62 for (var i = 1;i <= myMonthArry[inputSelectMonth.value - 1];i++) { 63 // FIXME 64 let option = document.createElement('option'); 65 option.value = i; 66 option.text = i; 67 inputSelectDay.appendChild(option); 68 } 69 }); 70 71 72 var submit = document.getElementById('submit'); 73 inputSelectDay = document.getElementById('inputSelectDay'); 74 75 if (submit == null) { 76 submit = document.getElementById('submit'); 77 } 78 console.log(submit); 79 submit.addEventListener('click', () => { 80 var y = inputSelectYear.value; 81 var m = inputSelectMonth.value; 82 if (m.toString().length === 1) { 83 m = '0' + m; 84 } 85 var d = inputSelectDay.value; 86 if (d.toString().length === 1) { 87 d = '0' + d; 88 } 89 inputSelectDay.value = (y + m + d); 90 console.log(inputSelectYear.value); 91 console.log(inputSelectMonth.value); 92 console.log(inputSelectDay.value); 93 console.log(inputSelectDay.value); 94 var inputEmailAddress = document.getElementById('inputEmailAddress').value; 95 var inputEmailAddressConfirm = document.getElementById('inputEmailAddressConfirm').value; 96 var inputPassword = document.getElementById('inputPassword').value; 97 var inputPasswordConfirm = document.getElementById('inputPasswordConfirm').value; 98 99 if (inputEmailAddress != inputEmailAddressConfirm) { 100 event.preventDefault(); 101 alert('メールアドレスが一致しません。'); 102 } else if (inputPassword != inputPasswordConfirm) { 103 event.preventDefault(); 104 alert('パスワードが一致しません。'); 105 } 106 var request = new XMLHttpRequest(); 107 request.open('GET', 'http://localhost:8080/project1/registered_check?emailAddress=' + inputEmailAddress, false); 108 request.send('?emailAddress=' + inputEmailAddress); 109 if (request.responseText === 'true') { 110 event.preventDefault(); 111 alert('メールアドレスが登録されているため登録できません。'); 112 } 113 console.log(request.responseText); 114 })}

html

1<!-- 文字数制限のため上は省略 --> 2 <div class="form-group"> 3 <label class="control-label" for="inputSelectYear"><abbr title="required">*</abbr>生年</label> 4 <select class="form-control" id="inputSelectYear" name="selectYear"> 5 <option th:each="year : ${selectYear}" th:value="${year}" th:selected="${year== year}" th:inline="text">[[${year}]]</option> 6 </select> 7<!-- <span th:if="${#fields.hasErrors('')}" th:errors="*{dateOfBirth}" class="help-block">error!</span> --> 8 </div> 9 <div class="form-group"> 10 <label class="control-label" for="inputSelectMonth"><abbr title="required">*</abbr>生月</label> 11 <select class="form-control" id="inputSelectMonth" name="selectMonth"> 12 <option th:each="month : ${selectMonth}" th:value="${month}" th:selected="${month == month}" th:inline="text">[[${month}]]</option> 13 </select> 14<!-- <span th:if="${#fields.hasErrors('')}" th:errors="*{dateOfBirth}" class="help-block">error!</span> --> 15 </div> 16 <div class="form-group"> 17 <label class="control-label" for="inputSelectDay"><abbr title="required">*</abbr>生日</label> 18 <select class="form-control" id="inputSelectDay" name="selectDay" th:field="*{dateOfBirth}"> 19<!-- <option value="1" selected th:value="${month}" th:inline="text">1</option> --> 20 </select> 21<!-- <span th:if="${#fields.hasErrors('')}" th:errors="*{dateOfBirth}" class="help-block">error!</span> --> 22 </div> 23 <!-- 文字数制限のため下も省略 --> 24

java

1package com.koikeya.project1.domain.model; 2 3import java.io.Serializable; 4 5import javax.persistence.Column; 6import javax.persistence.Entity; 7import javax.persistence.Id; 8import javax.persistence.Table; 9 10import org.springframework.stereotype.Component; 11 12import lombok.Data; 13 14/** 15 * 一時ユーザーエンティティクラス 16 * 17 * @author user 18 * 19 */ 20@Data 21@Entity 22@Table(name = "TEMP_USER") 23@Component 24public class TempUser implements Serializable { 25 26 /** 27 * UUID 28 */ 29 @Id 30 @Column(name = "UUID") 31 private String uuid; 32 33 /** 34 * メールアドレス 35 */ 36 @Column(name = "EMAIL_ADDRESS") 37 private String emailAddress; 38 39 /** 40 * 権限ID 41 */ 42 @Column(name = "ROLE_ID") 43 private String roleId; 44 45 /** 46 * 姓 47 */ 48 @Column(name = "LAST_NAME") 49 private String lastName; 50 51 /** 52 * セイ 53 */ 54 @Column(name = "RUBY1") 55 private String ruby1; 56 57 /** 58 * 名 59 */ 60 @Column(name = "FIRST_NAME") 61 private String firstName; 62 63 /** 64 * メイ 65 */ 66 @Column(name = "RUBY2") 67 private String ruby2; 68 69 /** 70 * 生年月日 71 */ 72 @Column(name = "DATE_OF_BIRTH") 73 private String dateOfBirth; 74 75 /** 76 *パスワード 77 */ 78 @Column(name = "PASSWORD") 79 private String password; 80 81 /** 82 * 登録日時 83 */ 84 @Column(name = "CREATED_AT", insertable = false, updatable = false) 85 private String createdAt; 86} 87

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

JavaScript

1submit.addEventListener('click', () => { 2 var y = inputSelectYear.value; 3 var m = inputSelectMonth.value; 4 if (m.toString().length === 1) { 5 m = '0' + m; 6 } 7 var d = inputSelectDay.value; 8 if (d.toString().length === 1) { 9 d = '0' + d; 10 } 11 inputSelectDay.value = (y + m + d); 12 13 // 省略 14 15});

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

html

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

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

JavaScript

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

投稿2019/12/23 17:09

rubytomato

総合スコア1752

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuki1111

2019/12/23 22:31

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問