【MV WP Form】生年月日から自動で年齢を計算する【JavaScript】

ブログ

2022.06.08 コーディング

【MV WP Form】生年月日から自動で年齢を計算する【JavaScript】

こんにちは。今回はお問い合わせフォームで使えるJavaScriptの実装例をご紹介します。

先日とある案件で、生年月日を入力すると自動で年齢が計算されるようにしたい!という要望がありました。

上の画像のように年・月・日と入力していくと年齢の入力欄に数字が自動で入ります。

WordPressのメジャーなフォーム作成プラグイン【MV WP Form】を使用しているサイトだったので、プラグインのデフォルト機能などで実現できないかな…と考えていたのですが、そういったものはなく、自身で組み込む必要がありました。

上記プラグインを使用しながらの実装はかなり勉強になりましたので、自分への覚書と同時に、同じような実装をしたい方へ是非参考になれば嬉しいです。

それではさっそく行ってみましょう!

コードを書く

まず参考にしたのは下記のサイトです。基本はこのサイトからで、セレクタの指示などを改変していきました。

日付から年齢を自動計算

下記がHTMLの参考コードです。といっても今回の場合<div id=”mw_wp_form_mw-wp-form-××”>~</div>間はプラグインを使うと自動で生成される部分で、こちらで自由に触るのが難しい箇所もあります。

〇〇となっている箇所は、プラグインによって自動で入力されていた長い記述なので割愛。

ざっとこんな感じです。基本的にname名やタグ名を元にjsの指示をしてるのでその辺りをポイントに見ていただければと思います。

続いてJavaScriptは下記のように。

解説

参考サイトはプラグインを使う想定での記述ではないためにハマった箇所や、記述を変更した箇所をピックアップして解説していきます。
formObjの指定
querySelectorを使い該当するフォームを指定します。参考にしたサイトでは
上記のようにformタグにクラス名やid名を付けて、それを指定する書き方をしていますが、MW WP FormではFormタグ自体を触ることができません。よって、formを囲っているdivタグに付いている#mw_wp_form_mw-wp-form-××から指定するやり方に変えました。
変数を追加

一連のコードの下の方(71行目~)ではformObjの変数を使いまわして選択変更時の動きを指示しているのですが、これだと発火が上手くいかなかったため、ピンポイントにselectタグのname名を指定する形で処理を行うことにしました。

変数定義の記法を変更

最初は参考のように,(カンマ)区切りで変数を定義していたんですが、使っている環境ではエラーが出てしまったので上記のように書き換えました。

(本来のルール的には,(カンマ)を使うのはOKだと思います。)

onchangeイベントをaddEventListenerに

上の参考サイトのコードのようにonchangeで指定をすると上手く動作しなかったため、addEventListenerを用いるようにしました。また、年月日の入力内容が一つでも変わったときに年齢の入力内容がチェンジするようにしました。

改変したのは以上です。

まとめ

いかがでしたか?

自動計算のロジックはMW WP Formがあってもなくても同じなのですが、プラグインを使ったとき特有の制限があり、まだまだjsビギナーの著者は非常に悪戦苦闘しました(汗)。

計算式などは参考サイトにかなーり助けられました。

どうやって所定の箇所に命令を送ったらいいか?とあれこれ悩んだ結果、また一歩知識が深まったように思います。

MW WP Formと自動計算の掛け合わせの際は是非、参考にしてみてください!

CONTACT
お問い合せ・お見積りはこちらから
  • 03-6279-3013 お問い合わせは 月~金 10:00~19:00

  • メールでのお問い合せはこちら