【jQuery】フォームの条件分岐(conditional logic)にはdependsOn!

作成日:

先日、フォームの条件分岐(conditional logic)にjQueryプラグイン「dependent.fields.js」を紹介したのですが、使いすすめていくうちに欠点が見えてきました。

📝 以前書いた記事
【jQuery】フォームに条件分岐(conditional logic)を設定する
例えばアンケートフォーム等で という設問があって、「その他」を選択すると、その下に新たに というテキストフォームが追加される、というのを作りたくて調べてみたら、このような仕様を conditional logic と言う...

その一つが、dependent.fields.jsで用意されているイベントハンドラはchangeのみで、初期読み込み時には実行してくれない点です。

📝 ポイント WordPressのフォームプラグインMW WP Formには、標準で送信前に「確認画面」を表示する機能があるのですが、そこから内容を修正する際に戻ると、dependent.fields.jsは実行してくれないので、改めてフォームを選択し直す必要があります。

なので、プラグイン自体を自分でカスタマイズするのも良いのですが、もっと他に手軽で使い勝手の良いものが無いか改めて探してみましたところ、良いプラグインが見つかりました。

それが「 dependsOn 」です。

https://dstreet.github.io/dependsOn

A jQuery plugin to facilitate the handling of form field dependencies.

ダウンロードはこちらから。

📝 ポイント

最新版はver1.5.1なのですが、当方のWordPress環境ではエラーが発生したため、ver1.0.0を使用しています。

こちらのプラグインであれば、読み込み時にも実行してくれますし、オプションも多々揃ってますので、カスタマイズの柔軟性も高いと思います。

dependsOn オプション

サンプルでは、フォームをセレクターにして表示/非表示を切り替えていますが、それらを囲む親要素をセレクターにすれば、ラベルや複数のフォームもまとめて切り替えが出来ます。

📝 ポイント 先日紹介したdependent.fields.jsと関数がバッティングしていますので、dependsOnを導入したら削除しておきましょう。
物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。