現在作成しているアプリの新規登録画面の生年月日を入力する欄で、
今まではtext_fieldで生年月日を直接入力する方法を行っていましたが、
閏年も選択できるプルダウンに変更しようと思い挑戦したところ、画面上には表示出来るところまでは出来たのですが、
その選択した生年月日がDBに保存されない状況になっています。
text_fieldの時のように、しっかりDBに保存される状態を実現したいと思っています。
haml
.user-register
.header51
= image_tag asset_path("logo.png"), size: "200x50", alt: "test"
.main
.title
.title__font
会員情報入力
= form_for(@user, url: user_registration_path) do |f|
= render "devise/shared/error_messages", resource: @user
.name-information
.name-information__item
.name-information__item__nicname
= f.label :nickname,"ニックネーム"
.name-information__item__required
必須
.name-information__name
= f.text_field :nickname,size:26
.email
.email__information
.email__information__address
= f.label :email,"メールアドレス"
.email__information__required
必須
.email__information
= f.email_field :email, autofocus: true, autocomplete: "email",size:26
.password
.password__item
.password__item__pass
= f.label :password,"パスワード"
.password__item__note
- if @minimum_password_length
(#{@minimum_password_length} 文字以上必要です)
.password__item__required
必須
.password__input
.password__description
= f.password_field :password, autocomplete: "new-password", size:26
.re-enter
.re-enter__item
.re-enter__item__pass
= f.label :password_confirmation,"確認用パスワード "
.re-enter__item__repuired
必須
.re-enter__itempass
= f.password_field :password_confirmation, autocomplete: "new-password",size:26
.Identification
.Identification__mozi
本人確認
.Identification__description
安心・安全にご利用いただくために、お客さまの本人情報の登録にご協力ください。他のお客さまに公開されることはありません。
.Identification-name
.Identification-name__box
.Identification-name__box__mozi
.Identification-name__box__mozi__oo
= f.label :family_name,"お名前(姓)"
.Identification-name__box__mozi__tt
必須
.Identification-name__box__nameinput
= f.text_field :family_name, size:15
.Identification-name__boxs
.Identification-name__boxs__a1
.Identification-name__boxs__a1__nn
= f.label :first_name,"お名前(名)"
.Identification-name__boxs__a1__mm
必須
.Identification-name__boxs__a2
= f.text_field :first_name, size:15
.Identification-name-kana
.Identification-name-kana__box
.Identification-name-kana__box__mozi
.Identification-name-kana__box__mozi__kiss
= f.label :family_name_kana,"お名前(セイ)"
.Identification-name-kana__box__mozi__pen
必須
.Identification-name-kana__box__hissu
= f.text_field :family_name_kana, size:15
.Identification-name-kana__boxs
.Identification-name-kana__boxs__b1
.Identification-name-kana__boxs__b1__pc
= f.label :first_name_kana,"お名前(メイ)"
.Identification-name-kana__boxs__b1__ice
必須
.Identification-name-kana__boxs__b2
= f.text_field :first_name_kana, size:15
.Birthday
.Birthday__box1
.Birthday__box1__mozi
生年月日
.Birthday__box1__hissu
必須
.Birthday__box2
.Birthday__box2__a
%label{:for => "birth"}
%select#birth_year
%option{:value => "0"} ----
年
%select#birth_month
%option{:value => "0"} --
月
%select#birth_day
%option{:value => "0"} --
日
-# = f.select :birth_year,["--"], {},{class: "birth_year", id:"select_birth_year"}
-# %label
-# 年
-# = f.select :birth_month, ["--"], {},{class: "birth_month", id:"select_birth_month"}
-# %label
-# 月
-# = f.select :birth_day, ["--"], {},{class: "birth_day", id:"select_birth_day"}
-# %label
-# 日
-# %label{:for => "birth"}
-# %select#birth_year
-# %option{:value => "0"} ----
-# 年
-# %select#birth_month
-# %option{:value => "0"} --
-# 月
-# %select#birth_day
-# %option{:value => "0"} --
-# 日
-# .Birthday__box2__a__1po
-# = f.text_field :birth_year, size:8, maxlength:4
-# .Birthday__box2__a__year
-# = f.label :birth_year,"年"
-# .Birthday__box2__b
-# .Birthday__box2__b__2po
-# = f.text_field :birth_month, size:7, maxlength:2
-# .Birthday__box2__b__month
-# = f.label :birth_month,"月"
-# .Birthday__box2__c
-# .Birthday__box2__c__3po
-# = f.text_field :birth_day, size:7, maxlength:2
-# .Birthday__box2__c__day
-# = f.label :birth_day,"日"
.Birthday__box3
※ 本人情報は正しく入力してください。会員登録後、修正するにはお時間を頂く場合があります。
.terms-of-service
.terms-of-service__mozi
「次へ進む」のボタンを押すことにより、利用規約に
同意したものとみなします
.terms-of-service__btm
%input#submit_button1{:name => "submit", :type => "submit", :value => "次へ進む"}/
.terms-of-service__register
本人情報の登録について>
.terms-of-service__english
This site is protected by reCAPTCHA and the Google PrivacyPolicy and Terms of Service apply.
.footer51
.title
.title__one
プライバシーポリシー
.title__tow
メルカリ利用規約
.title__three
特定商取引に関する表記
.item51
= image_tag asset_path("logo-white.png"), size: "200x60", alt: "test"
.logo51
© FURIMA, Inc.
JavaScript
$(function() {
// 現在の年月日を取得
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth() + 1;
var day = time.getDate();
// 選択された年月日を取得
var selected_year = document.getElementById("birth_year").value;
var selected_month = document.getElementById("birth_month").value;
// 年(初期): 1900〜現在の年 の値を設定
for (var i = year; i >= 1 ; i--) {
$('#birth_year').append('<option value="' + i + '">' + i + '</option>');
}
// 月(初期): 1~12 の値を設定
for (var j = 1; j <= 12; j++) {
$('#birth_month').append('<option value="' + j + '">' + j + '</option>');
}
// 日(初期): 1~31 の値を設定
for (var k = 1; k <= 31; k++) {
$('#birth_day').append('<option value="' + k + '">' + k + '</option>');
}
// 月(変更):選択された年に合わせて、適した月の値を選択肢にセットする
$('#birth_year').change(function() {
selected_year = $('#birth_year').val();
// 現在の年が選択された場合、月の選択肢は 1~現在の月 に設定
// それ以外の場合、1~12 に設定
var last_month = 12;
if (selected_year == year) {
last_month = month;
}
$('#birth_month').children('option').remove();
$('#birth_month').append('<option value="' + 0 + '">--</option>');
for (var n = 1; n <= last_month; n++) {
$('#birth_month').append('<option value="' + n + '">' + n + '</option>');
}
});
// 日(変更):選択された年・月に合わせて、適した日の値を選択肢にセットする
$('#birth_year,#birth_month').change(function() {
selected_year = $('#birth_year').val();
selected_month = $('#birth_month').val();
// 現在の年・月が選択された場合、日の選択肢は 1~現在の日付 に設定
// それ以外の場合、各月ごとの最終日を判定し、1~最終日 に設定
if (selected_year == year && selected_month == month ) {
var last_day = day;
}else{
// 2月:日の選択肢は1~28日に設定
// ※ ただし、閏年の場合は29日に設定
if (selected_month == 2) {
if((Math.floor(selected_year%4 == 0)) && (Math.floor(selected_year%100 != 0)) || (Math.floor(selected_year%400 == 0))){
last_day = 29;
}else{
last_day = 28;
}
// 4, 6, 9, 11月:日の選択肢は1~30日に設定
}else if(selected_month == 4 || selected_month == 6 || selected_month == 9 || selected_month == 11 ){
last_day = 30;
// 1, 3, 5, 7, 8, 10, 12月:日の選択肢は1~31日に設定
}else{
last_day = 31;
}
}
$('#birth_day').children('option').remove();
$('#birth_day').append('<option value="' + 0 + '">--</option>');
for (var m = 1; m <= last_day; m++) {
$('#birth_day').append('<option value="' + m + '">' + m + '</option>');
}
});
});
実行した事
仮説1
hamlのselectの記載がおかしいのではないか
実行
selectの記載をfrom_forの記述に変更結果
変更前と変わらずDBに保存されない
仮説2
スペルミスがあるのではないか
- 実行
全てのスペルの確認 - 結果
問題なし
補足
保存先のテーブルのカラム名は「年がbirth_year」、「月がbirth_month」、「日がbirth_day」です。