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

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

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



例えばアンケートフォーム等で




という設問があって、「その他」を選択すると、その下に新たに




というテキストフォームが追加される、というのを作りたくて調べてみたら、このような仕様を

conditional logic

と言うのだそうです。

そこでWordPressのプラグインでそのような機能を実装出来るプラグインを探してみたのですが、それらは軒並み有料でした。

しかし、jQueryのプラグインで無料で実装出来ることがわかりましたので、試してみることに。

使用したプラグインはこちらのdependent.fields.js

Show & Hide Form Fields Conditionally - jQuery dependent.fields.js
参考
Show & Hide Form Fields Conditionally - jQuery dependent.fields.js

Just another jQuery plugin for handling conditional forms that have the ability to show and hide certain form fields based on previous user input.

Show & Hide Form Fields Conditionally - jQuery dependent.fields.js jQuery Script

他にも多々あったのですが、データ属性を追加する必要があったりで、これだとWordPressのフォームプラグインでは使用出来ない(使用し辛い)ので候補から除きました。

dependent.fields.jsは、先程の例で言うと

<div class="form-group">
    <label>ここに来た目的は?</label>
    <select class="form-control" id="your-select" style="width:100px;">
        <option value="sightseeing">観光</option>
        <option value="work">仕事</option>
        <option value="other">その他</option>
    </select>
</div>
<div class="form-group">
    <label>その他を選んだ方はこちらに目的をご記入下さい</label>
    <input type="text" id="your-other" class="form-control" style="width:200px;">
</div>
$('#your-other').dependsOn('#your-select', ['other']);

としてやると、セレクトフォームで「その他」を選択すると下にテキストフォームが表示されるようになります・・・。

いえ、ならないのです。

というのも、このプラグインは、各フォームをpタグで囲む必要があるのです。

しかし、自分は主にbootstrapに準拠してコードを書くのが主なので、pタグを使うことはありません。
そのため、プラグインの

55行目

elements.closest('p').toggle(showEm);

elements.closest('.form-group').toggle(showEm);

に。

84行目

$(this).closest('p').hide();

$(this).closest('.form-group').hide();

に書き換えました。

これで無事、conditional logicを実装することが出来ました。

今日はここまで
【jQuery】フォームに条件分岐(conditional logic)を設定する

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


開発

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


関連する記事



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


【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テーブ…

コメントを残す