先日、WordPressのプラグインMW WP FORMを使っているウェブサイトで、生年月日を入力すると年齢が自動入力される機能を実装する相談を受けました。
JavaScriptを使ってこの機能を追加しましたので、その方法を共有します。
表題には、MW WP FORMと書かれていますが、「生年月日の値」と「現在の日付」を照らし合わせ自動で計算し出力するコードですので、MW WP FORMに限らず動作します。
実装方法
MW WP FORMで下記のように入力します。
内容は適宜ご自由に合わせてください。
年
[mwform_select name=”year” id=”year” class=”select” children=”:年,1950,1951,1952,1953,1954,1955,1956,1957,1958,1959,1960,1961,1962,1963,1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020″ post_raw=”true”]
月
[mwform_select name=”month” id=”month” class=”select” children=”:月,1,2,3,4,5,6,7,8,9,10,11,12″ post_raw=”true”]
日
[mwform_select name=”day” id=”day” class=”select” children=”:日,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31″ post_raw=”true”]
[mwform_text name=”old” id=”old” class=”text” size=”60″ placeholder=”年齢”]歳
javascriptは下記になります。
// フォーム 年齢自動入力
// セレクトボックスが変更されたときに実行される関数
document.getElementById(“year”).addEventListener(“change”, function() {
calculateAge();
});
document.getElementById(“month”).addEventListener(“change”, function() {
calculateAge();
});
document.getElementById(“day”).addEventListener(“change”, function() {
calculateAge();
});
// セレクトボックスから年齢出力
function calculateAge() {
var selectedYear = document.getElementById(“year”).value;
var selectedMonth = document.getElementById(“month”).value;
var selectedDay = document.getElementById(“day”).value;
// 現在の日付を取得
var today = new Date();
var currentYear = today.getFullYear();
var currentMonth = today.getMonth() + 1;
var currentDay = today.getDate();
// 年齢を計算
var age = currentYear – selectedYear;
// 誕生日がまだ来ていない場合、年齢を1つ減らす
if (selectedMonth > currentMonth || (selectedMonth == currentMonth && selectedDay > currentDay)) {
age--;
}
// 年齢を入力フィールドに自動入力
document.getElementById(“old”).value = age;
}
javascriptの説明
javascriptで関数 calculateAge() を定義し、「年」「月」「日」が変更されて際に動作するようにします。
関数「calculateAge()」の中身ですが、
選択された「年」「月」「日」と、今日の日付を取得し、「年」「月」「日」のそれぞれのデータを変数宣言します。
（getMonth()は0から始まる月のインデックスを返すため、+1しています。）
現在の「年」から選択された「年」を引き、誕生日が来ていない場合年齢を1つ減らせば、年齢が算出されます。
まとめ
今回は、選択された生年月日から年齢を自動入力する機能をjavascriptで追加しました。
MW WP FORMではなくとも、もちろん動作するためご参照ください。