【コピペで使える】フォームへの生年月日入力でリアルタイムに年齢を表示するサンプルコード
たーさん今回はフォームで生年月日を入力した際にリアルタイムで年齢を計算して表示するスクリプトコードを紹介します。
サンプルコード
<html>
<head>
<meta charset="utf-8">
<script>
window.addEventListener('DOMContentLoaded', function(){
var birthday = document.getElementById("birthday"); // 生年月日取得
birthday.addEventListener("change",function(){
let birthday = this.value.split('-'); // 年月日の分割
var age = getAge(birthday); // 生年月日・年齢変換
document.getElementById('age').innerHTML = ""; // 年齢表示削除
document.getElementById('age').innerHTML = age + "歳"; // 年齢表示追加
});
birthday.addEventListener("input",function(){
let birthday = this.value.split('-'); // 年月日の分割
var age = getAge(birthday); // 生年月日・年齢変換
document.getElementById('age').innerHTML = ""; // 年齢表示削除
document.getElementById('age').innerHTML = age + "歳"; // 年齢表示追加
});
});
function getAge(birthday){
var today = new Date();
var thisYearsBirthday = new Date(today.getFullYear(), birthday[1]-1, birthday[2]);
var age = today.getFullYear() - birthday[0];
if(today < thisYearsBirthday){
age--;
}
return age;
}
</script>
</head>
<body>
<form method="post" action="">
<input type="date" id="birthday" name="birthday" class="form-control" value="">
<span id="age"></span>
</form>
</body>
</html>まとめ
是非ご活用ください。
投稿者プロフィール
- 代表者
-
東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。
その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。
開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。
現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。
見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。
