シリーズ『フォームについて考える』~

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

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



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

【jQuery】フォームに条件分岐(conditional logic)を設定する
過去の記事
【jQuery】フォームに条件分岐(conditional logic)を設定する

例えばアンケートフォーム等で ここに来た目的は? 観光仕事その他 という設問があって、「その他」を選択すると、その下に新たに その他を選んだ方はこちらに目的をご記入下さい というテキストフォームが追加される、というのを作…

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

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

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

それが「dependsOn」です。

dependsOn - a jQuery plugin
参考
dependsOn - a jQuery plugin

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

dependsOn - a jQuery plugin

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

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

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

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

注意
先日紹介したdependent.fields.jsと関数がバッティングしていますので、dependsOnを導入したら削除しておきましょう。
今日はここまで
【jQuery】フォームの条件分岐(conditional logic)にはdependsOn!

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


開発

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


関連する記事



シリーズ『フォームについて考える』


【jQuery】フォームに条件分岐(conditional logic)を設定する
【jQuery】フォームに条件分岐(conditional logic)を設定する

例えばアンケートフォーム等で ここに来た目的は? 観光仕事その他 という設問があって、「その他」を選択すると、その下に新たに その他を選んだ方はこちらに目的をご記入下さい というテキストフォームが追加される、というのを作…


こちらはいかが?


jQueryでHTMLタグを置換する
jQueryでHTMLタグを置換する

例として、ボタンをクリックしてulタグをolタグに置換しています。 See the Pen クリックしてタグを置換する by kosuke agusa (@aguko) on CodePen. でも、このままだとidやク…

jQueryでExcel書き出し
jQueryでExcel書き出し

http://jquerybyexample.blogspot.com/2012/10/export-table-data-to-excel-using-jquery.html WordPressで作成したHTMLテーブ…

【jQuery】フォームに条件分岐(conditional logic)を設定する
【jQuery】フォームに条件分岐(conditional logic)を設定する

例えばアンケートフォーム等で ここに来た目的は? 観光仕事その他 という設問があって、「その他」を選択すると、その下に新たに その他を選んだ方はこちらに目的をご記入下さい というテキストフォームが追加される、というのを作…

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*(必須)

*(必須・表示されません)